mirror of
https://github.com/nexu-io/open-design.git
synced 2026-06-01 03:14:35 +07:00
Add complete French localization (#434)
This commit is contained in:
David Z
GitHub
parent
653c506b10
commit
c881c0ca34
18 changed files with 1508 additions and 104 deletions
|
|
@ -4,7 +4,7 @@ Danke, dass Sie über einen Beitrag nachdenken. OD ist bewusst klein gehalten
|
|||
|
||||
Dieser Leitfaden zeigt, wo Sie für welche Art Beitrag suchen sollten und welche Messlatte ein PR vor dem Merge erfüllen muss.
|
||||
|
||||
<p align="center"><a href="CONTRIBUTING.md">English</a> · <b>Deutsch</b> · <a href="CONTRIBUTING.zh-CN.md">简体中文</a> · <a href="CONTRIBUTING.ja-JP.md">日本語</a></p>
|
||||
<p align="center"><a href="CONTRIBUTING.md">English</a> · <b>Deutsch</b> · <a href="CONTRIBUTING.fr.md">Français</a> · <a href="CONTRIBUTING.zh-CN.md">简体中文</a> · <a href="CONTRIBUTING.ja-JP.md">日本語</a></p>
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -16,7 +16,7 @@ Dieser Leitfaden zeigt, wo Sie für welche Art Beitrag suchen sollten und welche
|
|||
| OD die visuelle Sprache einer neuen Marke sprechen lassen | ein **Design System** | [`design-systems/<brand>/DESIGN.md`](design-systems/) | eine Markdown-Datei |
|
||||
| Eine neue coding-agent CLI anbinden | einen **Agent adapter** | [`apps/daemon/src/agents.ts`](apps/daemon/src/agents.ts) | ca. 10 Zeilen in einem Array |
|
||||
| Feature ergänzen, Bug fixen, UX-Pattern aus [`open-codesign`][ocod] übernehmen | Code | `apps/web/src/`, `apps/daemon/` | normaler PR |
|
||||
| Dokumentation verbessern, Deutsch / 中文 ergänzen, Tippfehler fixen | Dokumentation | `README.md`, `README.de.md`, `README.zh-CN.md`, `docs/`, `QUICKSTART.md` | ein PR |
|
||||
| Dokumentation verbessern, Französisch / Deutsch / 中文 ergänzen, Tippfehler fixen | Dokumentation | `README.md`, `README.fr.md`, `README.de.md`, `README.zh-CN.md`, `docs/`, `QUICKSTART.md` | ein PR |
|
||||
|
||||
Wenn Sie nicht sicher sind, in welchen Bereich Ihre Idee fällt, [öffnen Sie zuerst eine Discussion / Issue](https://github.com/nexu-io/open-design/issues/new). Wir zeigen Ihnen dann die passende Oberfläche.
|
||||
|
||||
|
|
|
|||
435
CONTRIBUTING.fr.md
Normal file
435
CONTRIBUTING.fr.md
Normal file
|
|
@ -0,0 +1,435 @@
|
|||
# Contribuer à Open Design
|
||||
|
||||
Merci d'envisager de contribuer. OD reste volontairement petit : l'essentiel
|
||||
de la valeur vit dans des **fichiers** (Skills, Design Systems, morceaux de
|
||||
prompt) plutôt que dans du code de framework. Les contributions les plus utiles
|
||||
sont donc souvent un dossier, un fichier Markdown ou un petit adapter qui tient
|
||||
dans une PR.
|
||||
|
||||
Ce guide indique où intervenir pour chaque type de contribution et quel niveau
|
||||
une PR doit atteindre avant d’être mergée.
|
||||
|
||||
<p align="center"><a href="CONTRIBUTING.md">English</a> · <a href="CONTRIBUTING.de.md">Deutsch</a> · <b>Français</b> · <a href="CONTRIBUTING.zh-CN.md">简体中文</a> · <a href="CONTRIBUTING.ja-JP.md">日本語</a></p>
|
||||
|
||||
---
|
||||
|
||||
## Trois contributions faisables en un après-midi
|
||||
|
||||
| Si vous voulez… | Vous ajoutez en réalité | Où cela vit | Taille |
|
||||
|---|---|---|---|
|
||||
| Faire générer à OD un nouveau type d'artifact (facture, écran iOS Settings, one-pager…) | un **Skill** | [`skills/<your-skill>/`](skills/) | un dossier, ~2 fichiers |
|
||||
| Faire parler à OD le langage visuel d'une nouvelle marque | un **Design System** | [`design-systems/<brand>/DESIGN.md`](design-systems/) | un fichier Markdown |
|
||||
| Brancher une nouvelle CLI de coding agent | un **Agent adapter** | [`apps/daemon/src/agents.ts`](apps/daemon/src/agents.ts) | ~10 lignes dans un tableau |
|
||||
| Ajouter une feature, corriger un bug, reprendre un pattern UX de [`open-codesign`][ocod] | du code | `apps/web/src/`, `apps/daemon/` | PR classique |
|
||||
| Améliorer la doc, porter une section en Français / Deutsch / 中文, corriger une faute | documentation | `README.md`, `README.fr.md`, `README.de.md`, `README.zh-CN.md`, `docs/`, `QUICKSTART.md` | une PR |
|
||||
|
||||
Si vous ne savez pas dans quelle catégorie tombe votre idée, [ouvrez d'abord
|
||||
une discussion ou une issue](https://github.com/nexu-io/open-design/issues/new)
|
||||
et nous vous orienterons vers la bonne surface.
|
||||
|
||||
---
|
||||
|
||||
## Configuration locale
|
||||
|
||||
Le setup complet en une page se trouve dans [`QUICKSTART.fr.md`](QUICKSTART.fr.md).
|
||||
TL;DR pour contribuer :
|
||||
|
||||
```bash
|
||||
git clone https://github.com/nexu-io/open-design.git
|
||||
cd open-design
|
||||
corepack enable # sélectionne la version de pnpm définie par packageManager
|
||||
pnpm install
|
||||
pnpm tools-dev run web # boucle daemon + web au premier plan
|
||||
pnpm typecheck # tsc -b --noEmit
|
||||
pnpm build # build production
|
||||
```
|
||||
|
||||
Node `~24` et pnpm `10.33.x` sont requis. `nvm` / `fnm` sont optionnels ;
|
||||
utilisez `nvm install 24 && nvm use 24` ou `fnm install 24 && fnm use 24` si
|
||||
vous gérez Node comme cela. macOS, Linux et WSL2 sont les environnements
|
||||
principaux pris en charge.
|
||||
Windows natif devrait fonctionner, mais ce n'est pas la cible principale :
|
||||
ouvrez une issue si ce n'est pas le cas.
|
||||
|
||||
Vous n'avez pas besoin d'une CLI d'agent dans votre `PATH` pour développer OD.
|
||||
Le daemon indiquera "no agents found" ; utilisez alors le mode API/BYOK
|
||||
(Anthropic, OpenAI, Azure OpenAI ou Google Gemini), qui est souvent la boucle
|
||||
de dev la plus rapide.
|
||||
|
||||
---
|
||||
|
||||
## Ajouter un nouveau Skill
|
||||
|
||||
Un Skill est un dossier sous [`skills/`](skills/) avec un `SKILL.md` à la
|
||||
racine. Il suit la convention Claude Code [`SKILL.md`][skill], plus notre
|
||||
extension optionnelle `od:`. **Aucune étape d'enregistrement.** Déposez le
|
||||
dossier, redémarrez le daemon, et le picker l'affiche.
|
||||
|
||||
### Structure d'un dossier Skill
|
||||
|
||||
```text
|
||||
skills/your-skill/
|
||||
├── SKILL.md # requis
|
||||
├── assets/template.html # optionnel mais recommandé — seed file
|
||||
├── references/ # optionnel — fichiers de connaissance lus par l'agent
|
||||
│ ├── layouts.md
|
||||
│ ├── components.md
|
||||
│ └── checklist.md
|
||||
└── example.html # fortement recommandé — vrai exemple construit à la main
|
||||
```
|
||||
|
||||
### Frontmatter de `SKILL.md`
|
||||
|
||||
Les trois premières clés sont la spec Claude Code de base : `name`,
|
||||
`description`, `triggers`. Tout ce qui est sous `od:` est spécifique à OD et
|
||||
optionnel, mais **`od.mode`** décide dans quel groupe le Skill apparaît. La
|
||||
valeur est extensible ; les modes courants incluent Prototype, Deck, Image,
|
||||
Video, Audio, Design system et Utility.
|
||||
|
||||
```yaml
|
||||
---
|
||||
name: your-skill
|
||||
description: |
|
||||
One-paragraph elevator pitch. The agent reads this verbatim to decide
|
||||
if the user's brief matches. Be concrete: surface, audience, what's in
|
||||
the artifact, what's not.
|
||||
triggers:
|
||||
- "your trigger phrase"
|
||||
- "another phrase"
|
||||
- "中文触发词"
|
||||
od:
|
||||
mode: prototype # prototype | deck | image | video | audio | design-system | utility
|
||||
platform: desktop # desktop | mobile
|
||||
scenario: marketing # free-form tag for grouping
|
||||
featured: 1 # any positive integer surfaces it under "Showcase examples"
|
||||
preview:
|
||||
type: html # html | jsx | pptx | markdown
|
||||
entry: index.html
|
||||
design_system:
|
||||
requires: true # does the skill read the active DESIGN.md?
|
||||
sections: [color, typography, layout, components]
|
||||
example_prompt: "A copy-pastable prompt that nicely shows what this skill does."
|
||||
---
|
||||
|
||||
# Your Skill
|
||||
|
||||
Body is free-form Markdown describing the workflow the agent should follow…
|
||||
```
|
||||
|
||||
La grammaire complète — typed inputs, paramètres de sliders, capability gating
|
||||
— se trouve dans [`docs/skills-protocol.md`](docs/skills-protocol.md).
|
||||
|
||||
### Critères de merge pour un nouveau Skill
|
||||
|
||||
Nous sommes exigeants sur les Skills parce qu'ils constituent la partie la plus
|
||||
visible pour l'utilisateur. Un nouveau Skill doit :
|
||||
|
||||
1. **Livrer un vrai `example.html`.** Construit à la main, ouvrable directement
|
||||
depuis le disque, avec un niveau qu'un designer pourrait réellement livrer.
|
||||
Pas de lorem ipsum, pas de hero placeholder en `<svg><rect/></svg>`. Si vous
|
||||
ne pouvez pas construire l'exemple vous-même, le Skill n'est probablement
|
||||
pas prêt.
|
||||
2. **Passer l'anti-AI-slop checklist** dans le body. Pas de gradients violets,
|
||||
pas d'icônes emoji génériques, pas de carte arrondie avec accent en bord
|
||||
gauche, pas d'Inter comme fonte *display*, pas de statistiques inventées.
|
||||
Lisez la section **Anti-AI-slop machinery** du README pour la liste complète.
|
||||
3. **Utiliser des placeholders honnêtes.** Si l'agent n'a pas de vraie donnée,
|
||||
écrivez `—` ou un bloc gris libellé, pas "10× faster".
|
||||
4. **Avoir un `references/checklist.md`** avec au moins les gates P0, c'est-à-dire
|
||||
ce que l'agent doit vérifier avant d'émettre `<artifact>`. Reprenez le format
|
||||
de [`skills/guizang-ppt/references/checklist.md`](skills/guizang-ppt/) ou
|
||||
[`skills/dating-web/references/checklist.md`](skills/dating-web/).
|
||||
5. **Ajouter une capture** sous `docs/screenshots/skills/<skill>.png` si le Skill
|
||||
est featured. PNG, environ 1024×640 retina, capturé depuis le vrai
|
||||
`example.html` avec un zoom navigateur adapté.
|
||||
6. **Rester dans un dossier autonome.** Pas d'import CDN au-delà de ce que les
|
||||
autres Skills utilisent déjà ; pas de fonte sans licence ; pas d'image de
|
||||
plus d'environ 250 KB.
|
||||
|
||||
Si vous forkez un Skill existant (par exemple partir de `dating-web` pour en
|
||||
faire `recruiting-web`), conservez la LICENSE et l'attribution d'auteur dans
|
||||
`references/`, et mentionnez-le dans la description de la PR.
|
||||
|
||||
### Skills existants à imiter
|
||||
|
||||
- Prototype visuel single-screen : [`skills/dating-web/`](skills/dating-web/),
|
||||
[`skills/digital-eguide/`](skills/digital-eguide/)
|
||||
- Flow mobile multi-frame : [`skills/mobile-onboarding/`](skills/mobile-onboarding/),
|
||||
[`skills/gamified-app/`](skills/gamified-app/)
|
||||
- Document / template sans Design System requis : [`skills/pm-spec/`](skills/pm-spec/),
|
||||
[`skills/weekly-update/`](skills/weekly-update/)
|
||||
- Deck mode : [`skills/guizang-ppt/`](skills/guizang-ppt/) (bundle repris tel
|
||||
quel depuis [op7418/guizang-ppt-skill][guizang]) et
|
||||
[`skills/simple-deck/`](skills/simple-deck/)
|
||||
|
||||
---
|
||||
|
||||
## Ajouter un nouveau Design System
|
||||
|
||||
Un design system est un seul fichier [`DESIGN.md`](design-systems/README.md)
|
||||
sous `design-systems/<slug>/`. **Un fichier, pas de code.** Déposez-le,
|
||||
redémarrez le daemon, le picker l'affiche dans sa catégorie.
|
||||
|
||||
### Structure d'un dossier Design System
|
||||
|
||||
```text
|
||||
design-systems/your-brand/
|
||||
└── DESIGN.md
|
||||
```
|
||||
|
||||
### Forme de `DESIGN.md`
|
||||
|
||||
```markdown
|
||||
# Design System Inspired by YourBrand
|
||||
|
||||
> Category: Developer Tools
|
||||
> One-line summary that shows in the picker preview.
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
…
|
||||
|
||||
## 2. Color
|
||||
- Primary: `#hex` / `oklch(...)`
|
||||
- …
|
||||
|
||||
## 3. Typography
|
||||
…
|
||||
|
||||
## 4. Spacing & Grid
|
||||
## 5. Layout & Composition
|
||||
## 6. Components
|
||||
## 7. Motion & Interaction
|
||||
## 8. Voice & Brand
|
||||
## 9. Anti-patterns
|
||||
```
|
||||
|
||||
Le schéma à 9 sections est fixe : c'est ce que les Skill bodies cherchent. Le
|
||||
premier H1 devient le label dans le picker (le préfixe `Design System Inspired by`
|
||||
est retiré automatiquement), et la ligne `> Category: …` décide du groupe.
|
||||
Les catégories existantes sont listées dans [`design-systems/README.md`](design-systems/README.md) ;
|
||||
si votre marque ne rentre vraiment nulle part, vous pouvez en introduire une
|
||||
nouvelle, mais **essayez d'abord les catégories existantes**.
|
||||
|
||||
### Critères de merge pour un nouveau Design System
|
||||
|
||||
1. **Les 9 sections sont présentes.** Des sections vides sont acceptables pour
|
||||
les informations difficiles à trouver (par exemple des tokens de motion),
|
||||
mais les headings doivent exister, sinon la recherche utilisée par le prompt
|
||||
risque de casser.
|
||||
2. **Les hex codes sont réels.** Échantillonnez directement depuis le site ou
|
||||
le produit de la marque, pas de mémoire ni à partir d'une supposition de l'IA. Le
|
||||
protocole d'extraction brand-spec en 5 étapes du README s'applique aussi aux
|
||||
mainteneurs.
|
||||
3. **Les valeurs OKLch pour les couleurs d'accent** sont un plus : elles rendent
|
||||
les palettes plus prévisibles entre light/dark.
|
||||
4. **Pas de fluff marketing.** La tagline d'une marque n'est pas un design token.
|
||||
Coupez-la.
|
||||
5. **Le slug utilise l'ASCII** : `linear.app` devient `linear-app`, `x.ai`
|
||||
devient `x-ai`. Les systèmes importés suivent déjà cette convention ;
|
||||
imitez-la.
|
||||
|
||||
Les product systems livrés sont importés depuis [`VoltAgent/awesome-design-md`][acd2]
|
||||
via [`scripts/sync-design-systems.ts`](scripts/sync-design-systems.ts). Si votre
|
||||
marque appartient à cet upstream, **envoyez d'abord la PR là-bas** : OD le
|
||||
récupérera au prochain sync. Le dossier `design-systems/` sert aux systèmes qui
|
||||
ne rentrent pas upstream, plus nos starters écrits à la main.
|
||||
|
||||
---
|
||||
|
||||
## Ajouter une nouvelle CLI de coding agent
|
||||
|
||||
Brancher un nouvel agent (par exemple une CLI `foo-coder`) revient à ajouter
|
||||
une entrée dans [`apps/daemon/src/agents.ts`](apps/daemon/src/agents.ts) :
|
||||
|
||||
```javascript
|
||||
{
|
||||
id: 'foo',
|
||||
name: 'Foo Coder',
|
||||
bin: 'foo',
|
||||
versionArgs: ['--version'],
|
||||
buildArgs: (prompt) => ['exec', '-p', prompt],
|
||||
streamFormat: 'plain', // or 'claude-stream-json' if it speaks that
|
||||
}
|
||||
```
|
||||
|
||||
C'est tout : le daemon la détecte dans le `PATH`, le picker l'affiche et le
|
||||
chemin chat fonctionne. Si la CLI émet des **typed events** (comme
|
||||
`--output-format stream-json` de Claude Code), ajoutez un parser dans
|
||||
[`apps/daemon/src/claude-stream.ts`](apps/daemon/src/claude-stream.ts) et mettez
|
||||
`streamFormat: 'claude-stream-json'`.
|
||||
|
||||
Critères de merge :
|
||||
|
||||
1. **Une vraie session fonctionne end-to-end** avec le nouvel agent. Collez le
|
||||
log daemon dans la description de la PR pour montrer qu'il a streamé un artifact.
|
||||
2. **`docs/agent-adapters.md`** documente les particularités de la CLI : fichier
|
||||
de clé requis, support de l'image, flag non interactif, etc.
|
||||
3. **La table "Supported coding agents" du README** reçoit une ligne.
|
||||
|
||||
---
|
||||
|
||||
## Mettre à jour les métadonnées `max_tokens` des modèles
|
||||
|
||||
En mode API, le chat envoie `max_tokens` au provider upstream à chaque requête.
|
||||
Le client web choisit ce nombre avec une lookup à trois niveaux dans
|
||||
[`apps/web/src/state/maxTokens.ts`](apps/web/src/state/maxTokens.ts) :
|
||||
|
||||
1. L'override explicite de l'utilisateur dans Settings, s'il existe.
|
||||
2. Sinon, la valeur par modèle dans [`apps/web/src/state/litellm-models.json`](apps/web/src/state/litellm-models.json),
|
||||
un extrait vendored du `model_prices_and_context_window.json` de
|
||||
[BerriAI/litellm][litellm] (MIT). Il couvre environ 2k modèles chat chez
|
||||
Anthropic, OpenAI, DeepSeek, Groq, Together, Mistral, Gemini, Bedrock,
|
||||
Vertex, OpenRouter et autres.
|
||||
3. Sinon, `FALLBACK_MAX_TOKENS = 8192`.
|
||||
|
||||
Pour récupérer un modèle nouvellement lancé, régénérez le JSON vendored :
|
||||
|
||||
```bash
|
||||
node --experimental-strip-types scripts/sync-litellm-models.ts
|
||||
```
|
||||
|
||||
Le script récupère le catalogue LiteLLM, filtre les entrées `mode: 'chat'`,
|
||||
projette chacune vers son `max_output_tokens` (ou fallback `max_tokens`), puis
|
||||
écrit un snapshot trié. Commitez le `litellm-models.json` régénéré avec la PR
|
||||
qui motive cette mise à jour.
|
||||
|
||||
La table `OVERRIDES` dans `maxTokens.ts` est réservée aux rares cas où LiteLLM
|
||||
est absent ou incorrect pour un model id réellement utilisé, par exemple
|
||||
`mimo-v2.5-pro`. Gardez-la petite ; tout ce que LiteLLM sait déjà correctement
|
||||
doit rester upstream.
|
||||
|
||||
[litellm]: https://github.com/BerriAI/litellm
|
||||
|
||||
---
|
||||
|
||||
## Maintenance des localisations
|
||||
|
||||
Les PR de locale doivent traduire le chrome UI, la documentation cœur et les
|
||||
métadonnées display-only de galerie dans `apps/web/src/i18n/content*.ts`, mais
|
||||
ne doivent pas traduire `skills/`, `design-systems/` ni les prompt bodies que
|
||||
les agents exécutent. Ces prompts source sont des entrées de workflow ; garder
|
||||
une langue source commune évite de multiplier la QA de prompts sur toutes les
|
||||
locales. Lorsqu'un Skill, un Design System ou un prompt template est ajouté ou
|
||||
renommé, mettez à jour les métadonnées display de la locale concernée et lancez
|
||||
`pnpm --filter @open-design/web test` ; `content.test.ts` échoue si la coverage
|
||||
couverture des métadonnées d'affichage d'une locale déclarée dérive. Les erreurs daemon, noms de fichiers
|
||||
d'export et textes d'artifact générés par agent restent des limites connues,
|
||||
sauf si une PR les inclut explicitement.
|
||||
|
||||
Pour les étapes détaillées d'ajout d'une locale (dictionnaire UI, README,
|
||||
language switcher, terminologie régionale), voir [`TRANSLATIONS.md`](TRANSLATIONS.md).
|
||||
|
||||
---
|
||||
|
||||
## Style de code
|
||||
|
||||
Nous ne sommes pas maniaques du formatting (Prettier on save est très bien),
|
||||
mais deux règles ne sont pas négociables parce qu'elles apparaissent dans le
|
||||
prompt stack et l'API visible :
|
||||
|
||||
1. **Single quotes en JS/TS.** Les strings utilisent des single quotes sauf si
|
||||
l'échappement les rend illisibles. La codebase est déjà cohérente ; suivez-la.
|
||||
2. **Commentaires en anglais.** Même si une PR traduit quelque chose en français,
|
||||
allemand ou chinois, les commentaires de code restent en anglais afin de
|
||||
garder une référence greppable unique.
|
||||
|
||||
Au-delà de ça :
|
||||
|
||||
- **Ne racontez pas l'évidence.** Pas de `// import the module`, pas de
|
||||
`// loop through items`. Si le code se lit déjà, le commentaire est du bruit.
|
||||
Gardez les commentaires pour l'intention non évidente ou les contraintes que
|
||||
le code ne peut pas exprimer.
|
||||
- **TypeScript** pour le code source de `apps/web/src/` et `apps/daemon/src/`.
|
||||
Le JavaScript généré appartient aux dossiers `dist/`; les nouveaux fichiers
|
||||
`.js`, `.mjs` ou `.cjs` doivent avoir une raison générée, vendored ou
|
||||
compatibility explicite.
|
||||
- **Pas de nouvelle dépendance top-level** sans paragraphe dans la description
|
||||
de la PR expliquant ce qu'elle apporte et combien d'octets elle coûte. La liste
|
||||
des dépendances dans [`package.json`](package.json) est petite volontairement.
|
||||
- **Lancez `pnpm typecheck`** avant de push. CI le lance aussi ; s'il échoue,
|
||||
vous aurez un commentaire "please fix".
|
||||
|
||||
---
|
||||
|
||||
## Commits et Pull Requests
|
||||
|
||||
- **Un seul sujet par PR.** Ajouter un Skill, refactorer le parser et bumper une
|
||||
dépendance : ce sont trois PR.
|
||||
- **Titre impératif + scope.** `add dating-web skill`,
|
||||
`fix daemon SSE backpressure when CLI hangs`, `docs: clarify .od layout`.
|
||||
- **Le body explique le pourquoi.** Le diff montre souvent le quoi ; le pourquoi
|
||||
est rarement évident.
|
||||
- **Référencez une issue** s'il y en a une. S'il n'y en a pas et que la PR est
|
||||
non trivial, ouvrez-en d'abord une pour valider que le changement est souhaité.
|
||||
- **Pas de squash pendant la review.** Poussez des fixups ; les maintainers
|
||||
squashent au merge.
|
||||
- **Pas de force-push sur une branche partagée** sauf si un reviewer le demande.
|
||||
|
||||
Nous n'imposons pas de CLA. Apache-2.0 couvre le projet ; votre contribution
|
||||
est licenciée sous la même licence.
|
||||
|
||||
---
|
||||
|
||||
## Signaler un bug
|
||||
|
||||
Ouvrez une issue avec :
|
||||
|
||||
- La commande exacte lancée (`pnpm tools-dev ...`).
|
||||
- La CLI d'agent sélectionnée, ou le fait que vous étiez sur le chemin BYOK.
|
||||
- La paire Skill + Design System qui a déclenché le problème.
|
||||
- La **fin du stderr du daemon** concerné. La plupart des rapports "l'artifact
|
||||
n'a jamais rendu" se diagnostiquent en 30 secondes si on voit `spawn ENOENT`
|
||||
ou l'erreur réelle de la CLI.
|
||||
- Une capture d'écran si le problème touche l'UI.
|
||||
|
||||
Pour les bugs de prompt stack ("l'agent a généré un hero violet alors que la
|
||||
blacklist slop devait l'interdire"), incluez le **message assistant complet**
|
||||
afin de voir si la violation vient du modèle ou du prompt.
|
||||
|
||||
---
|
||||
|
||||
## Poser des questions
|
||||
|
||||
- Question d'architecture, question de design, "bug ou mauvaise utilisation ?" →
|
||||
[GitHub Discussions](https://github.com/nexu-io/open-design/discussions)
|
||||
(préféré, car searchable pour la personne suivante).
|
||||
- "Comment écrire un Skill qui fait X ?" → ouvrez une discussion. Nous y
|
||||
répondrons et transformerons la réponse en ajout dans
|
||||
[`docs/skills-protocol.md`](docs/skills-protocol.md) si c'est un pattern manquant.
|
||||
|
||||
---
|
||||
|
||||
## Ce que nous n'acceptons pas
|
||||
|
||||
Pour garder le projet focalisé, merci de ne pas ouvrir de PR qui :
|
||||
|
||||
- **Vendor un runtime de modèle.** Tout le pari d'OD est "votre CLI existante
|
||||
suffit". Nous ne livrons pas `pi-ai`, de clés OpenAI ou de model loaders.
|
||||
- **Réécrit le frontend hors de la stack actuelle sans discussion préalable.**
|
||||
Next.js 16 App Router + React 18 + TS est la ligne. Pas de réécriture Astro,
|
||||
Solid, Svelte ou autre framework sauf si les maintainers veulent explicitement
|
||||
cette migration.
|
||||
- **Remplace le daemon par une fonction serverless.** Le rôle du daemon est de
|
||||
posséder un vrai `cwd` et de spawn une vraie CLI. Déployer la SPA sur Vercel
|
||||
est très bien ; le daemon reste un daemon.
|
||||
- **Ajoute de la télémétrie / analytics / phone-home.** OD est local-first.
|
||||
Les seuls appels sortants vont vers des providers explicitement configurés
|
||||
par l'utilisateur.
|
||||
- **Bundle un binaire** sans fichier de licence ni attribution d'auteur à côté.
|
||||
|
||||
Si vous n'êtes pas sûr que votre idée rentre dans le projet, ouvrez une
|
||||
discussion avant d'écrire le code.
|
||||
|
||||
---
|
||||
|
||||
## Licence
|
||||
|
||||
En contribuant, vous acceptez que votre contribution soit licenciée sous la
|
||||
[licence Apache-2.0](LICENSE) de ce repo, à l'exception des fichiers dans
|
||||
[`skills/guizang-ppt/`](skills/guizang-ppt/), qui conservent leur licence MIT
|
||||
originale et l'attribution d'auteur à [op7418](https://github.com/op7418).
|
||||
|
||||
[skill]: https://docs.anthropic.com/en/docs/claude-code/skills
|
||||
[guizang]: https://github.com/op7418/guizang-ppt-skill
|
||||
[acd2]: https://github.com/VoltAgent/awesome-design-md
|
||||
[ocod]: https://github.com/OpenCoworkAI/open-codesign
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
このガイドでは、各種コントリビューションの対象場所と、PR がマージされるために満たすべき基準を正確に説明します。
|
||||
|
||||
<p align="center"><a href="CONTRIBUTING.md">English</a> · <a href="CONTRIBUTING.de.md">Deutsch</a> · <a href="CONTRIBUTING.zh-CN.md">简体中文</a> · <b>日本語</b></p>
|
||||
<p align="center"><a href="CONTRIBUTING.md">English</a> · <a href="CONTRIBUTING.de.md">Deutsch</a> · <a href="CONTRIBUTING.fr.md">Français</a> · <a href="CONTRIBUTING.zh-CN.md">简体中文</a> · <b>日本語</b></p>
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
| OD に新しいブランドのビジュアル言語を話させる | **Design System** | [`design-systems/<brand>/DESIGN.md`](design-systems/) | Markdown ファイル 1 つ |
|
||||
| 新しい coding-agent CLI を接続する | **Agent adapter** | [`apps/daemon/src/agents.ts`](apps/daemon/src/agents.ts) | 1 つの配列に約 10 行 |
|
||||
| 機能追加、バグ修正、[`open-codesign`][ocod] から UX パターンを移植 | コード | `apps/web/src/`、`apps/daemon/` | 通常の PR |
|
||||
| ドキュメント改善、他言語への翻訳、タイポ修正 | ドキュメント | `README.md`、`README.zh-CN.md`、`docs/`、`QUICKSTART.md` | PR 1 つ |
|
||||
| ドキュメント改善、Français / Deutsch / 中文 への翻訳、タイポ修正 | ドキュメント | `README.md`、`README.fr.md`、`README.de.md`、`README.zh-CN.md`、`docs/`、`QUICKSTART.md` | PR 1 つ |
|
||||
|
||||
アイデアがどのカテゴリに該当するか分からない場合は、[まず discussion / issue を作成](https://github.com/nexu-io/open-design/issues/new)してください。適切な場所をご案内します。
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ Thanks for thinking about contributing. OD is small on purpose — most of the v
|
|||
|
||||
This guide tells you exactly where to look for each type of contribution and what bar a PR has to clear before we merge it.
|
||||
|
||||
<p align="center"><b>English</b> · <a href="CONTRIBUTING.de.md">Deutsch</a> · <a href="CONTRIBUTING.zh-CN.md">简体中文</a> · <a href="CONTRIBUTING.ja-JP.md">日本語</a></p>
|
||||
<p align="center"><b>English</b> · <a href="CONTRIBUTING.de.md">Deutsch</a> · <a href="CONTRIBUTING.fr.md">Français</a> · <a href="CONTRIBUTING.zh-CN.md">简体中文</a> · <a href="CONTRIBUTING.ja-JP.md">日本語</a></p>
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -16,7 +16,7 @@ This guide tells you exactly where to look for each type of contribution and wha
|
|||
| Make OD speak a new brand's visual language | a **Design System** | [`design-systems/<brand>/DESIGN.md`](design-systems/) | one Markdown file |
|
||||
| Hook up a new coding-agent CLI | an **Agent adapter** | [`apps/daemon/src/agents.ts`](apps/daemon/src/agents.ts) | ~10 lines in one array |
|
||||
| Add a feature, fix a bug, lift a UX pattern from [`open-codesign`][ocod] | code | `apps/web/src/`, `apps/daemon/` | normal PR |
|
||||
| Improve docs, port a section to Deutsch / 中文, fix typos | docs | `README.md`, `README.de.md`, `README.zh-CN.md`, `docs/`, `QUICKSTART.md` | one PR |
|
||||
| Improve docs, port a section to Français / Deutsch / 中文, fix typos | docs | `README.md`, `README.fr.md`, `README.de.md`, `README.zh-CN.md`, `docs/`, `QUICKSTART.md` | one PR |
|
||||
|
||||
If you're not sure which bucket your idea is in, [open a discussion / issue first](https://github.com/nexu-io/open-design/issues/new) and we'll point you at the right surface.
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
这份指南会告诉你：每种贡献该往哪里看、合并之前 PR 需要过哪些线。
|
||||
|
||||
<p align="center"><a href="CONTRIBUTING.md">English</a> · <a href="CONTRIBUTING.de.md">Deutsch</a> · <b>简体中文</b> · <a href="CONTRIBUTING.ja-JP.md">日本語</a></p>
|
||||
<p align="center"><a href="CONTRIBUTING.md">English</a> · <a href="CONTRIBUTING.de.md">Deutsch</a> · <a href="CONTRIBUTING.fr.md">Français</a> · <b>简体中文</b> · <a href="CONTRIBUTING.ja-JP.md">日本語</a></p>
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
| 让 OD 说一种新品牌的视觉语言 | 一套 **Design System** | [`design-systems/<brand>/DESIGN.md`](design-systems/) | 一个 Markdown 文件 |
|
||||
| 接入一个新的 coding-agent CLI | 一个 **Agent adapter** | [`apps/daemon/src/agents.ts`](apps/daemon/src/agents.ts) | 一个数组里 ~10 行 |
|
||||
| 加功能、修 bug、从 [`open-codesign`][ocod] 移植一个 UX 模式 | 代码 | `apps/web/src/`、`apps/daemon/` | 普通 PR |
|
||||
| 改文档、补德语 / 中文翻译、修错别字 | 文档 | `README.md`、`README.de.md`、`README.zh-CN.md`、`docs/`、`QUICKSTART.md` | 一个 PR |
|
||||
| 改文档、补法语 / 德语 / 中文翻译、修错别字 | 文档 | `README.md`、`README.fr.md`、`README.de.md`、`README.zh-CN.md`、`docs/`、`QUICKSTART.md` | 一个 PR |
|
||||
|
||||
不确定自己想做的属于哪一桶？[先开 issue / discussion](https://github.com/nexu-io/open-design/issues/new)，我们告诉你该改哪个面。
|
||||
|
||||
|
|
|
|||
|
|
@ -4,14 +4,14 @@
|
|||
|
||||
Exécutez le produit complet localement.
|
||||
|
||||
## Prérequis d’environnement
|
||||
## Prérequis
|
||||
|
||||
- **Node.js :** `~24` (Node 24.x). Le repo l’impose via `package.json#engines`.
|
||||
- **pnpm :** `10.33.x`. Le repo fixe `pnpm@10.33.2` via `packageManager` ; utilisez Corepack pour que la version pinnée soit sélectionnée automatiquement.
|
||||
- **OS :** macOS, Linux et WSL2 sont les chemins principaux. Windows natif devrait fonctionner pour la plupart des flows, mais WSL2 reste la base la plus sûre.
|
||||
- **pnpm :** `10.33.x`. Le repo fixe `pnpm@10.33.2` via `packageManager` ; utilisez Corepack pour que la bonne version soit sélectionnée automatiquement.
|
||||
- **OS :** macOS, Linux et WSL2 sont les environnements principaux pris en charge. Windows natif devrait fonctionner pour la plupart des workflows, mais WSL2 reste l’option la plus fiable.
|
||||
- **CLI d’agent locale optionnelle :** Claude Code, Codex, Devin for Terminal, Gemini CLI, OpenCode, Cursor Agent, Qwen, GitHub Copilot CLI, etc. Si aucune n’est installée, utilisez le mode BYOK API depuis Settings.
|
||||
|
||||
`nvm` / `fnm` sont des outils de confort optionnels, pas une étape obligatoire du setup projet. Si vous en utilisez un, installez/sélectionnez Node 24 avant de lancer pnpm :
|
||||
`nvm` / `fnm` sont des outils de confort optionnels, pas une étape obligatoire de la configuration du projet. Si vous en utilisez un, installez/sélectionnez Node 24 avant de lancer pnpm :
|
||||
|
||||
```bash
|
||||
# nvm
|
||||
|
|
@ -30,7 +30,7 @@ corepack enable
|
|||
corepack pnpm --version # doit afficher 10.33.2
|
||||
```
|
||||
|
||||
## One-shot (mode dev)
|
||||
## Démarrage rapide (mode dev)
|
||||
|
||||
```bash
|
||||
corepack enable
|
||||
|
|
@ -45,14 +45,14 @@ Pour le shell desktop et tous les sidecars gérés en arrière-plan :
|
|||
pnpm tools-dev # démarre daemon + web + desktop en arrière-plan
|
||||
```
|
||||
|
||||
Au premier chargement, l’app détecte votre CLI de coding agent installée (Claude Code / Codex / Devin for Terminal / Gemini / OpenCode / Cursor Agent / Qwen), la sélectionne automatiquement, puis utilise par défaut le Skill `web-prototype` et le Design System `Neutral Modern`. Tapez un prompt et cliquez sur **Send**. L’agent stream dans le panneau gauche ; le tag `<artifact>` est extrait et le HTML est rendu en live à droite. Quand il a terminé, cliquez sur **Save to disk** pour persister l’artifact sous `./.od/artifacts/<timestamp>-<slug>/index.html`.
|
||||
Au premier chargement, l’app détecte votre CLI de coding agent installée (Claude Code / Codex / Devin for Terminal / Gemini / OpenCode / Cursor Agent / Qwen), la sélectionne automatiquement, puis utilise par défaut le Skill `web-prototype` et le Design System `Neutral Modern`. Tapez un prompt et cliquez sur **Send**. Les sorties de l’agent s’affichent en streaming dans le panneau gauche ; la balise `<artifact>` est extraite et le HTML s’affiche en direct à droite. Une fois la génération terminée, cliquez sur **Save to disk** pour enregistrer l’artifact sous `./.od/artifacts/<timestamp>-<slug>/index.html`.
|
||||
|
||||
Le dropdown **Design System** charge les Design Systems depuis `design-systems/*/DESIGN.md` : starters écrits à la main, product systems intégrés et design skills normalisés. Choisissez-en un pour habiller chaque prototype dans l’esthétique de cette marque.
|
||||
Le menu déroulant **Design System** charge les Design Systems depuis `design-systems/*/DESIGN.md` : starters écrits à la main, product systems intégrés et design skills normalisés. Choisissez-en un pour habiller chaque prototype dans l’esthétique de cette marque.
|
||||
|
||||
Le dropdown **Skill** regroupe les entrées par `mode` / `surface` et affiche le Skill par défaut de chaque mode avec un suffixe `· default`. Le catalogue live vient de [`skills/`](skills/) et couvre les flows web, deck, Design System, image, vidéo et audio. Exemples inclus :
|
||||
Le menu déroulant **Skill** regroupe les entrées par `mode` / `surface` et affiche le Skill par défaut de chaque mode avec un suffixe `· default`. Le catalogue live vient de [`skills/`](skills/) et couvre les workflows web, deck, Design System, image, vidéo et audio. Exemples inclus :
|
||||
|
||||
- **Prototype** — `web-prototype` (générique), `saas-landing`, `dashboard`, `pricing-page`, `docs-page`, `blog-post`, `mobile-app`.
|
||||
- **Deck / PPT** — `simple-deck` (swipe horizontal single-file) et `magazine-web-ppt` (le bundle `guizang-ppt` depuis [`op7418/guizang-ppt-skill`](https://github.com/op7418/guizang-ppt-skill), par défaut en deck mode, avec ses propres assets/template + 4 références). Les Skills avec side files reçoivent automatiquement un préambule "Skill root (absolute)" pour que l’agent puisse résoudre `assets/template.html` et `references/*.md` depuis le vrai chemin disque au lieu de son CWD.
|
||||
- **Deck / PPT** — `simple-deck` (swipe horizontal single-file) et `magazine-web-ppt` (le bundle `guizang-ppt` depuis [`op7418/guizang-ppt-skill`](https://github.com/op7418/guizang-ppt-skill), par défaut en mode deck, avec ses propres assets/template + 4 références). Les Skills avec side files reçoivent automatiquement un préambule "Skill root (absolute)" pour que l’agent puisse résoudre `assets/template.html` et `references/*.md` depuis le vrai chemin disque au lieu de son CWD.
|
||||
- **Médias et Design System** — par exemple `image-poster`, `video-shortform`, `audio-jingle`, `hyperframes` et `design-brief`.
|
||||
|
||||
Associez un Skill, un Design System et un seul prompt : vous obtenez un prototype, un deck ou un rendu adapté au mode / à la surface choisie.
|
||||
|
|
@ -67,7 +67,7 @@ pnpm tools-dev restart # redémarre daemon + web + desktop
|
|||
pnpm tools-dev restart --daemon-port 7457 --web-port 5175
|
||||
pnpm tools-dev status # inspecte les runtimes gérés
|
||||
pnpm tools-dev logs # affiche les logs daemon/web/desktop
|
||||
pnpm tools-dev check # status + logs récents + diagnostics courants
|
||||
pnpm tools-dev check # statut + logs récents + diagnostics courants
|
||||
pnpm tools-dev stop # arrête les runtimes gérés
|
||||
pnpm --filter @open-design/daemon build # build apps/daemon/dist/cli.js pour `od`
|
||||
pnpm build # build production + export static vers apps/web/out/
|
||||
|
|
@ -78,16 +78,16 @@ pnpm typecheck # typecheck du workspace
|
|||
|
||||
Pendant le développement local, `tools-dev` démarre d’abord le daemon, transmet son port à `apps/web`, puis `apps/web/next.config.ts` réécrit `/api/*`, `/artifacts/*` et `/frames/*` vers ce port daemon. L’app App Router peut ainsi parler au processus Express voisin sans configuration CORS.
|
||||
|
||||
## Checks media generation / agent dispatcher
|
||||
## Checks de génération média / agent dispatcher
|
||||
|
||||
Les Skills image, vidéo, audio et HyperFrames appellent la CLI locale `od` via des variables d’environnement injectées par le daemon quand il spawn un agent :
|
||||
Les Skills image, vidéo, audio et HyperFrames appellent la CLI locale `od` via des variables d’environnement injectées par le daemon lorsqu’il lance un agent :
|
||||
|
||||
- `OD_BIN` — chemin absolu vers `apps/daemon/dist/cli.js`.
|
||||
- `OD_DAEMON_URL` — URL du daemon en cours d’exécution.
|
||||
- `OD_PROJECT_ID` — id du projet actif.
|
||||
- `OD_PROJECT_DIR` — dossier de fichiers du projet actif.
|
||||
|
||||
Si la génération media échoue avec `OD_BIN: parameter not set`, `apps/daemon/dist/cli.js` manquant, ou `failed to reach daemon at http://127.0.0.1:0`, rebuildez la CLI daemon et redémarrez le runtime géré :
|
||||
Si la génération média échoue avec `OD_BIN: parameter not set`, `apps/daemon/dist/cli.js` manquant, ou `failed to reach daemon at http://127.0.0.1:0`, rebuildez la CLI daemon et redémarrez le runtime géré :
|
||||
|
||||
```bash
|
||||
pnpm --filter @open-design/daemon build
|
||||
|
|
@ -106,7 +106,7 @@ echo "OD_DAEMON_URL=$OD_DAEMON_URL"
|
|||
ls -la "$OD_BIN"
|
||||
```
|
||||
|
||||
`OD_DAEMON_URL` doit être un vrai port daemon comme `http://127.0.0.1:7457`, pas `http://127.0.0.1:0`. La valeur `:0` est seulement un hint interne "choisir un port libre" au lancement et ne doit pas fuiter dans les sessions agent.
|
||||
`OD_DAEMON_URL` doit être un vrai port daemon comme `http://127.0.0.1:7457`, pas `http://127.0.0.1:0`. La valeur `:0` est seulement une indication interne "choisir un port libre" au lancement et ne doit pas se retrouver dans les sessions agent.
|
||||
|
||||
En mode production daemon-only, le daemon sert lui-même l’export static Next.js à `http://localhost:7456`; aucun reverse proxy n’est impliqué.
|
||||
|
||||
|
|
@ -135,8 +135,8 @@ location /api/ {
|
|||
|
||||
| Mode | Valeur du picker | Flux d’une requête |
|
||||
|---|---|---|
|
||||
| **Local CLI** (par défaut quand le daemon détecte un agent) | "Local CLI" | Frontend → daemon `/api/chat` → `spawn(<agent>, ...)` → stdout → SSE → parser d’artifact → preview |
|
||||
| **Anthropic API** (fallback / aucune CLI) | "Anthropic API · BYOK" | Frontend → `@anthropic-ai/sdk` direct (`dangerouslyAllowBrowser`) → parser d’artifact → preview |
|
||||
| **Local CLI** (par défaut quand le daemon détecte un agent) | "Local CLI" | Frontend → daemon `/api/chat` → `spawn(<agent>, ...)` → stdout → SSE → parser `<artifact>` → preview |
|
||||
| **Mode API** (fallback / aucune CLI) | "Anthropic API" / "OpenAI API" / "Azure OpenAI" / "Google Gemini" | Frontend → daemon `/api/proxy/{provider}/stream` → SSE provider normalisé en `delta/end/error` → parser `<artifact>` → preview |
|
||||
|
||||
Les deux modes alimentent le **même** parser `<artifact>` et la **même** iframe sandboxée. Seuls le transport et la livraison du system prompt changent : les CLI locales n’ont pas de canal système séparé, donc le prompt composé est intégré au message utilisateur.
|
||||
|
||||
|
|
@ -150,7 +150,7 @@ BASE_SYSTEM_PROMPT (contrat de sortie : wrap in <artifact>, no code fences)
|
|||
+ active skill body (SKILL.md — workflow and output rules)
|
||||
```
|
||||
|
||||
Changez le Skill ou le Design System dans la barre supérieure : le prochain envoi utilise le nouveau stack. Les bodies sont cachés en mémoire par session, donc un choix ne coûte qu’un fetch daemon.
|
||||
Changez le Skill ou le Design System dans la barre supérieure : le prochain envoi utilise le nouveau stack. Les contenus sont mis en cache en mémoire par session, donc un choix ne coûte qu’un fetch daemon.
|
||||
|
||||
## File map
|
||||
|
||||
|
|
@ -174,7 +174,7 @@ open-design/
|
|||
│ │ ├── prompts/ # system, discovery, directions, deck framework
|
||||
│ │ ├── artifacts/ # parser <artifact> streaming + manifests
|
||||
│ │ ├── runtime/ # iframe srcdoc, markdown, helpers d’export
|
||||
│ │ └── state/ # localStorage + project state backed by daemon
|
||||
│ │ └── state/ # localStorage + état projet persisté par le daemon
|
||||
│ ├── sidecar/ # wrapper sidecar web pour tools-dev
|
||||
│ └── next.config.ts # rewrites tools-dev + config export prod apps/web/out
|
||||
│ └── desktop/ # runtime Electron, lancé/inspecté par tools-dev
|
||||
|
|
@ -215,9 +215,9 @@ open-design/
|
|||
|
||||
## Dépannage
|
||||
|
||||
- **"no agents found on PATH"** — installez une CLI compatible, par exemple `claude`, `codex`, `gemini`, `opencode`, `cursor-agent`, `qwen` ou `copilot`. La liste exacte des adapters détectés vit dans `apps/daemon/src/agents.ts`. Ou passez à "Anthropic API · BYOK" dans la barre supérieure et collez une clé dans **Settings**.
|
||||
- **"no agents found on PATH"** — installez une CLI compatible, par exemple `claude`, `codex`, `gemini`, `opencode`, `cursor-agent`, `qwen` ou `copilot`. La liste exacte des adapters détectés vit dans `apps/daemon/src/agents.ts`. Ou passez au mode API/BYOK dans la barre supérieure et collez une clé dans **Settings**.
|
||||
- **daemon 500 sur /api/chat** — vérifiez la fin de stderr dans le terminal daemon ; la CLI a généralement rejeté ses args. Les CLIs n’acceptent pas toutes la même forme d’argv ; consultez `apps/daemon/src/agents.ts` `buildArgs` si vous devez ajuster.
|
||||
- **media generation dit que `OD_BIN` manque ou que l’URL daemon vaut `:0`** — exécutez les checks du dispatcher media ci-dessus. Ne reprenez pas l’ancienne session CLI ; rouvrez le projet depuis l’app Open Design pour que le daemon injecte des variables `OD_*` fraîches.
|
||||
- **la génération média dit que `OD_BIN` manque ou que l’URL daemon vaut `:0`** — exécutez les checks du dispatcher média ci-dessus. Ne reprenez pas l’ancienne session CLI ; rouvrez le projet depuis l’app Open Design pour que le daemon injecte des variables `OD_*` fraîches.
|
||||
- **Codex charge trop de contexte plugin** — démarrez Open Design avec `OD_CODEX_DISABLE_PLUGINS=1 pnpm tools-dev` pour que les processus Codex lancés par le daemon tournent avec `--disable plugins`.
|
||||
- **l’artifact ne rend jamais** — le modèle a produit du texte sans wrapper `<artifact>`. Vérifiez que le system prompt passe bien (log daemon) et envisagez un modèle plus capable ou un Skill plus strict.
|
||||
|
||||
|
|
@ -226,6 +226,6 @@ open-design/
|
|||
Ce Quickstart est la graine exécutable de la spec dans [`docs/`](docs/). La spec décrit vers quoi le projet grandit (voir [`docs/roadmap.md`](docs/roadmap.md)). Points clés :
|
||||
|
||||
- `docs/architecture.md` décrit le stack livré : Next.js 16 App Router devant, daemon local derrière, et rewrites `apps/web/next.config.ts` en dev pour que le navigateur parle toujours à la même surface `/api`.
|
||||
- `docs/skills-protocol.md` décrit le schéma `od:` complet. Le daemon lit les metadata runtime utiles depuis `SKILL.md` pour router les Skills, composer le prompt, afficher les exemples et configurer les surfaces web / image / vidéo / audio ; le protocole reste la référence pour les champs avancés.
|
||||
- `docs/skills-protocol.md` décrit le schéma `od:` complet. Le daemon lit les métadonnées runtime utiles depuis `SKILL.md` pour router les Skills, composer le prompt, afficher les exemples et configurer les surfaces web / image / vidéo / audio ; le protocole reste la référence pour les champs avancés.
|
||||
- `docs/agent-adapters.md` anticipe un dispatch plus riche (capability detection, streaming tool-calls). Notre `apps/daemon/src/agents.ts` est un dispatcher minimal : suffisant pour prouver le câblage.
|
||||
- `docs/modes.md` décrit les workflows prototype / deck / template / design-system. Le catalogue runtime peut aussi exposer des Skills pour les surfaces image, vidéo et audio ; le picker filtre les entrées par `mode` et `surface`.
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
<a href="QUICKSTART.md"><img alt="Quickstart" src="https://img.shields.io/badge/quickstart-3%20commands-green?style=flat-square" /></a>
|
||||
</p>
|
||||
|
||||
<p align="center"><a href="README.md">English</a> · <b>Deutsch</b> · <a href="README.fr.md">Français</a> · <a href="README.zh-CN.md">简体中文</a> · <a href="README.zh-TW.md">繁體中文</a> · <a href="README.ko.md">한국어</a> · <a href="README.ja-JP.md">日本語</a> · العربية · <a href="README.ru.md">Русский</a></p>
|
||||
<p align="center"><a href="README.md">English</a> · <b>Deutsch</b> · <a href="README.fr.md">Français</a> · <a href="README.zh-CN.md">简体中文</a> · <a href="README.zh-TW.md">繁體中文</a> · <a href="README.ko.md">한국어</a> · <a href="README.ja-JP.md">日本語</a> · العربية · <a href="README.ru.md">Русский</a> · <a href="README.uk.md">Українська</a></p>
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -691,7 +691,7 @@ Issues, PRs, neue Skills und neue Design Systems sind willkommen. Die wirkungsvo
|
|||
- **Add a design system** — legen Sie ein `DESIGN.md` in [`design-systems/<brand>/`](design-systems/) nach dem 9-Section Schema ab.
|
||||
- **Wire up a new coding-agent CLI** — ein Eintrag in [`apps/daemon/src/agents.ts`](apps/daemon/src/agents.ts).
|
||||
|
||||
Vollständiger Walkthrough, Merge-Messlatte, Code Style und was wir nicht annehmen → [`CONTRIBUTING.de.md`](CONTRIBUTING.de.md) ([English](CONTRIBUTING.md), [简体中文](CONTRIBUTING.zh-CN.md)).
|
||||
Vollständiger Walkthrough, Merge-Messlatte, Code Style und was wir nicht annehmen → [`CONTRIBUTING.de.md`](CONTRIBUTING.de.md) ([English](CONTRIBUTING.md), [Français](CONTRIBUTING.fr.md), [简体中文](CONTRIBUTING.zh-CN.md)).
|
||||
|
||||
## Mitwirkende
|
||||
|
||||
|
|
|
|||
118
README.fr.md
118
README.fr.md
|
|
@ -1,6 +1,6 @@
|
|||
# Open Design
|
||||
|
||||
> **L’alternative open source à [Claude Design][cd].** Local-first, déployable sur le web, BYOK à chaque couche : **12 CLI de coding agents** détectées automatiquement dans votre `PATH` (Claude Code, Codex, Devin for Terminal, Cursor Agent, Gemini CLI, OpenCode, Qwen, GitHub Copilot CLI, Hermes, Kimi, Pi, Kiro) deviennent le design engine, piloté par **31 Skills composables** et **72 Design Systems brand-grade**. Aucune CLI ? Un proxy BYOK compatible OpenAI exécute la même boucle, sans spawn local.
|
||||
> **L’alternative open source à [Claude Design][cd].** Local-first, déployable sur le web, BYOK à chaque couche : vos CLI de coding agents détectées automatiquement dans le `PATH` deviennent le design engine, piloté par les catalogues de **Skills** et de **Design Systems** du repo. Aucune CLI ? Le proxy BYOK multi-provider exécute la même boucle, sans spawn local.
|
||||
|
||||
<p align="center">
|
||||
<img src="docs/assets/banner.png" alt="Open Design : couverture éditoriale, design avec l’agent sur votre laptop" width="100%" />
|
||||
|
|
@ -19,13 +19,13 @@
|
|||
<p align="center">
|
||||
<a href="https://github.com/nexu-io/open-design/releases/latest"><img alt="Latest release" src="https://img.shields.io/github/v/release/nexu-io/open-design?style=flat-square&color=blueviolet&label=release&include_prereleases" /></a>
|
||||
<a href="LICENSE"><img alt="License" src="https://img.shields.io/badge/license-Apache%202.0-blue.svg?style=flat-square" /></a>
|
||||
<a href="#coding-agents-pris-en-charge"><img alt="Agents" src="https://img.shields.io/badge/agents-12%20CLI%20%2B%20BYOK%20proxy-black?style=flat-square" /></a>
|
||||
<a href="#design-systems"><img alt="Design systems" src="https://img.shields.io/badge/design%20systems-72-orange?style=flat-square" /></a>
|
||||
<a href="#skills"><img alt="Skills" src="https://img.shields.io/badge/skills-31-teal?style=flat-square" /></a>
|
||||
<a href="#coding-agents-pris-en-charge"><img alt="Agents" src="https://img.shields.io/badge/agents-CLI%20%2B%20BYOK%20proxy-black?style=flat-square" /></a>
|
||||
<a href="#design-systems"><img alt="Design systems" src="https://img.shields.io/badge/design%20systems-catalogue-orange?style=flat-square" /></a>
|
||||
<a href="#skills"><img alt="Skills" src="https://img.shields.io/badge/skills-catalogue-teal?style=flat-square" /></a>
|
||||
<a href="QUICKSTART.fr.md"><img alt="Quickstart" src="https://img.shields.io/badge/quickstart-3%20commands-green?style=flat-square" /></a>
|
||||
</p>
|
||||
|
||||
<p align="center"><a href="README.md">English</a> · <a href="README.de.md">Deutsch</a> · <b>Français</b> · <a href="README.zh-CN.md">简体中文</a> · <a href="README.zh-TW.md">繁體中文</a> · <a href="README.ko.md">한국어</a> · <a href="README.ja-JP.md">日本語</a> · العربية · <a href="README.ru.md">Русский</a></p>
|
||||
<p align="center"><a href="README.md">English</a> · <a href="README.de.md">Deutsch</a> · <b>Français</b> · <a href="README.zh-CN.md">简体中文</a> · <a href="README.zh-TW.md">繁體中文</a> · <a href="README.ko.md">한국어</a> · <a href="README.ja-JP.md">日本語</a> · العربية · <a href="README.ru.md">Русский</a> · <a href="README.uk.md">Українська</a></p>
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -50,11 +50,11 @@ OD s’appuie sur quatre projets open source :
|
|||
|
||||
| | Ce que vous obtenez |
|
||||
|---|---|
|
||||
| **CLI de coding agents (12)** | Claude Code · Codex CLI · Devin for Terminal · Cursor Agent · Gemini CLI · OpenCode · Qwen Code · GitHub Copilot CLI · Hermes (ACP) · Kimi CLI (ACP) · Pi (RPC) · Kiro CLI (ACP), détectées automatiquement dans `PATH`, interchangeables en un clic |
|
||||
| **BYOK fallback** | Proxy compatible OpenAI sur `/api/proxy/stream` : collez `baseUrl` + `apiKey` + `model`, et n’importe quel fournisseur (Anthropic-via-OpenAI, DeepSeek, Groq, MiMo, OpenRouter, votre vLLM self-hosted ou tout autre endpoint compatible OpenAI) devient le moteur. Les destinations internal IP / SSRF sont bloquées côté daemon. |
|
||||
| **Design Systems intégrés** | **72 Design Systems core** : 2 starters écrits à la main + 70 product systems (Linear, Stripe, Vercel, Airbnb, Tesla, Notion, Anthropic, Apple, Cursor, Supabase, Figma, Xiaohongshu, …) depuis [`awesome-design-md`][acd2]. En complément, 57 design skills depuis [`awesome-design-skills`][ads] sont ajoutés comme ressources normalisées sous `design-systems/`. |
|
||||
| **Skills intégrés** | **31 Skills** : 27 en mode `prototype` (web-prototype, saas-landing, dashboard, mobile-app, gamified-app, social-carousel, magazine-poster, dating-web, sprite-animation, motion-frames, critique, tweaks, wireframe-sketch, pm-spec, eng-runbook, finance-report, hr-onboarding, invoice, kanban-board, team-okrs, …) + 4 en mode `deck` (`guizang-ppt` · `simple-deck` · `replit-deck` · `weekly-update`). Regroupés dans le picker par `scenario` : design / marketing / operation / engineering / product / finance / hr / sale / personal. |
|
||||
| **Génération média** | Les surfaces image, vidéo et audio sont livrées avec la design loop. **gpt-image-2** (Azure / OpenAI) pour posters, avatars, infographies et cartes illustrées ; **Seedance 2.0** (ByteDance) pour du text-to-video et image-to-video cinématique de 15 s ; **HyperFrames** ([heygen-com/hyperframes](https://github.com/heygen-com/hyperframes)) pour des motion graphics HTML→MP4. **93** prompts prêts à reproduire, 43 gpt-image-2 + 39 Seedance + 11 HyperFrames, sous [`prompt-templates/`](prompt-templates/) avec thumbnails et attribution. Même surface de chat que le code ; les sorties deviennent de vrais fichiers `.mp4` / `.png` dans le workspace du projet. |
|
||||
| **CLI de coding agents** | Claude Code · Codex CLI · Devin for Terminal · Cursor Agent · Gemini CLI · OpenCode · Qwen Code · GitHub Copilot CLI · Hermes (ACP) · Kimi CLI (ACP) · Pi (RPC) · Kiro CLI (ACP) · Mistral Vibe CLI (ACP), détectées automatiquement dans `PATH`, interchangeables en un clic |
|
||||
| **BYOK fallback** | Proxy API par protocole sur `/api/proxy/{anthropic,openai,azure,google}/stream` : collez `baseUrl` + `apiKey` + `model`, choisissez Anthropic / OpenAI / Azure OpenAI / Google Gemini, et le daemon normalise le SSE vers le même chat stream. Les destinations internal IP / SSRF sont bloquées côté daemon. |
|
||||
| **Design Systems intégrés** | Le menu déroulant charge les Design Systems depuis `design-systems/*/DESIGN.md` : starters écrits à la main, product systems importés depuis [`awesome-design-md`][acd2] et design skills normalisés depuis [`awesome-design-skills`][ads]. |
|
||||
| **Skills intégrés** | Le picker charge les Skills depuis `skills/*/SKILL.md` et les regroupe par `mode` / `scenario` : prototype, deck, image, video, audio, Design System, utility, puis notamment design / marketing / operations / engineering / product / finance / hr / sales / personal. |
|
||||
| **Génération média** | Les surfaces image, vidéo et audio sont livrées avec la design loop. **gpt-image-2** (Azure / OpenAI) pour posters, avatars, infographies et cartes illustrées ; **Seedance 2.0** (ByteDance) pour du text-to-video et image-to-video cinématique de 15 s ; **HyperFrames** ([heygen-com/hyperframes](https://github.com/heygen-com/hyperframes)) pour des motion graphics HTML→MP4. La galerie [`prompt-templates/`](prompt-templates/) fournit des prompts prêts à reproduire, avec thumbnails et attribution. Même surface de chat que le code ; les sorties deviennent de vrais fichiers `.mp4` / `.png` dans le workspace du projet. |
|
||||
| **Directions visuelles** | 5 écoles soigneusement sélectionnées (Editorial Monocle · Modern Minimal · Warm Soft · Tech Utility · Brutalist Experimental), chacune avec palette OKLch déterministe + font stack ([`apps/web/src/prompts/directions.ts`](apps/web/src/prompts/directions.ts)) |
|
||||
| **Frames d’appareils** | iPhone 15 Pro · Pixel · iPad Pro · MacBook · Browser Chrome, pixel-accurate et partagés entre Skills sous [`assets/frames/`](assets/frames/) |
|
||||
| **Agent runtime** | Le daemon local lance la CLI dans le dossier projet. L’agent reçoit de vrais `Read`, `Write`, `Bash`, `WebFetch` sur un environnement disque réel, avec fallback Windows `ENAMETOOLONG` (stdin / prompt-file) sur chaque adapter |
|
||||
|
|
@ -97,8 +97,8 @@ OD s’appuie sur quatre projets open source :
|
|||
<sub><b>Preview sandboxée</b> : chaque <code><artifact></code> est rendu dans une iframe srcdoc propre. Modifiable sur place via le file workspace ; téléchargeable en HTML, PDF, ZIP.</sub>
|
||||
</td>
|
||||
<td width="50%">
|
||||
<img src="docs/screenshots/06-design-systems-library.png" alt="06 · Bibliothèque de 72 Design Systems" /><br/>
|
||||
<sub><b>Bibliothèque de 72 Design Systems</b> : chaque product system montre sa signature en 4 couleurs. Cliquez pour le <code>DESIGN.md</code> complet, la grille de swatches et le showcase live.</sub>
|
||||
<img src="docs/screenshots/06-design-systems-library.png" alt="06 · Bibliothèque de Design Systems" /><br/>
|
||||
<sub><b>Bibliothèque de Design Systems</b> : chaque product system montre sa signature en 4 couleurs. Cliquez pour le <code>DESIGN.md</code> complet, la grille de swatches et le showcase live.</sub>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -115,9 +115,9 @@ OD s’appuie sur quatre projets open source :
|
|||
|
||||
## Skills
|
||||
|
||||
**31 Skills sont livrés par défaut.** Chaque Skill est un dossier sous [`skills/`](skills/) suivant la convention [`SKILL.md`][skill] de Claude Code, avec un frontmatter `od:` étendu que le daemon lit tel quel : `mode`, `platform`, `scenario`, `preview.type`, `design_system.requires`, `default_for`, `featured`, `fidelity`, `speaker_notes`, `animations`, `example_prompt` ([`apps/daemon/src/skills.ts`](apps/daemon/src/skills.ts)).
|
||||
Les Skills livrés avec le repo sont des dossiers sous [`skills/`](skills/) suivant la convention [`SKILL.md`][skill] de Claude Code, avec un frontmatter `od:` étendu que le daemon lit tel quel : `mode`, `platform`, `scenario`, `preview.type`, `design_system.requires`, `default_for`, `featured`, `fidelity`, `speaker_notes`, `animations`, `example_prompt` ([`apps/daemon/src/skills.ts`](apps/daemon/src/skills.ts)).
|
||||
|
||||
Deux **modes** structurent le catalogue : **`prototype`** (27 Skills, tout ce qui rend un single-page artifact, d’une landing de style magazine à un écran mobile ou une PM spec) et **`deck`** (4 Skills, présentations à swipe horizontal avec deck chrome). Le champ **`scenario`** sert au regroupement dans le picker : `design` · `marketing` · `operation` · `engineering` · `product` · `finance` · `hr` · `sale` · `personal`.
|
||||
Le champ **`mode`** structure le catalogue (`prototype`, `deck`, `image`, `video`, `audio`, `design-system`, `utility`, etc.). Le champ **`scenario`** sert au regroupement dans le picker, avec des labels comme `design` · `marketing` · `operations` · `engineering` · `product` · `finance` · `hr` · `sales` · `personal`, et d’autres selon les Skills.
|
||||
|
||||
### Exemples showcase
|
||||
|
||||
|
|
@ -161,7 +161,7 @@ Les Skills visuellement distinctifs que vous lancerez probablement en premier. C
|
|||
</td>
|
||||
<td width="50%" valign="top">
|
||||
<a href="skills/sprite-animation/"><img src="docs/screenshots/skills/sprite-animation.png" alt="sprite-animation" /></a><br/>
|
||||
<sub><b><a href="skills/sprite-animation/"><code>sprite-animation</code></a></b> · <i>prototype</i><br/>Slide explicative pixel / 8-bit animée : scène crème plein cadre, mascotte pixel animée, display type japonais cinétique, keyframes CSS en boucle.</sub>
|
||||
<sub><b><a href="skills/sprite-animation/"><code>sprite-animation</code></a></b> · <i>prototype</i><br/>Slide explicative pixel / 8-bit animée : scène crème plein cadre, mascotte pixel animée, typographie display japonaise cinétique, keyframes CSS en boucle.</sub>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
@ -172,8 +172,8 @@ Les Skills visuellement distinctifs que vous lancerez probablement en premier. C
|
|||
|---|---|---|---|
|
||||
| [`web-prototype`](skills/web-prototype/) | desktop | design | HTML single-page : landings, marketing, hero pages (défaut pour prototype) |
|
||||
| [`saas-landing`](skills/saas-landing/) | desktop | marketing | Layout marketing hero / features / pricing / CTA |
|
||||
| [`dashboard`](skills/dashboard/) | desktop | operation | Admin / analytics avec sidebar + data dense |
|
||||
| [`pricing-page`](skills/pricing-page/) | desktop | sale | Page pricing autonome + tableaux de comparaison |
|
||||
| [`dashboard`](skills/dashboard/) | desktop | operations | Admin / analytics avec sidebar + data dense |
|
||||
| [`pricing-page`](skills/pricing-page/) | desktop | sales | Page pricing autonome + tableaux de comparaison |
|
||||
| [`docs-page`](skills/docs-page/) | desktop | engineering | Documentation en 3 colonnes |
|
||||
| [`blog-post`](skills/blog-post/) | desktop | marketing | Long-form éditorial |
|
||||
| [`mobile-app`](skills/mobile-app/) | mobile | design | Écran(s) app dans frame iPhone 15 Pro / Pixel |
|
||||
|
|
@ -205,8 +205,8 @@ Les Skills visuellement distinctifs que vous lancerez probablement en premier. C
|
|||
|---|---|---|
|
||||
| [`pm-spec`](skills/pm-spec/) | product | Spec PM avec table des matières + decision log |
|
||||
| [`team-okrs`](skills/team-okrs/) | product | Scorecard OKR |
|
||||
| [`meeting-notes`](skills/meeting-notes/) | operation | Notes de réunion et decision log |
|
||||
| [`kanban-board`](skills/kanban-board/) | operation | Snapshot de board |
|
||||
| [`meeting-notes`](skills/meeting-notes/) | operations | Notes de réunion et decision log |
|
||||
| [`kanban-board`](skills/kanban-board/) | operations | Snapshot de board |
|
||||
| [`eng-runbook`](skills/eng-runbook/) | engineering | Runbook d’incident |
|
||||
| [`finance-report`](skills/finance-report/) | finance | Résumé finance exécutif |
|
||||
| [`invoice`](skills/invoice/) | finance | Facture single-page |
|
||||
|
|
@ -218,15 +218,15 @@ Ajouter un Skill revient à ajouter un dossier. Lisez [`docs/skills-protocol.md`
|
|||
|
||||
### 1 · Nous ne livrons pas d’agent. Le vôtre suffit.
|
||||
|
||||
Au démarrage, le daemon scanne votre `PATH` pour [`claude`](https://docs.anthropic.com/en/docs/claude-code), [`codex`](https://github.com/openai/codex), `devin`, [`cursor-agent`](https://www.cursor.com/cli), [`gemini`](https://github.com/google-gemini/gemini-cli), [`opencode`](https://opencode.ai/), [`qwen`](https://github.com/QwenLM/qwen-code), [`copilot`](https://github.com/features/copilot/cli), `hermes`, `kimi`, [`pi`](https://github.com/mariozechner/pi-ai) et [`kiro-cli`](https://kiro.dev). Ceux qu’il trouve deviennent des design engines candidats, pilotés via stdio avec un adapter par CLI et interchangeables depuis le model picker. Inspiré par [`multica`](https://github.com/multica-ai/multica) et [`cc-switch`](https://github.com/farion1231/cc-switch). Aucune CLI installée ? `POST /api/proxy/stream` suit la même pipeline, sans spawn local : collez n’importe quels `baseUrl` + `apiKey` compatibles OpenAI et le daemon renvoie les chunks SSE, avec rejet des destinations loopback / link-local / RFC1918.
|
||||
Au démarrage, le daemon scanne votre `PATH` avec les définitions de [`apps/daemon/src/agents.ts`](apps/daemon/src/agents.ts) : Claude Code, Codex, Devin for Terminal, Cursor Agent, Gemini CLI, OpenCode, Qwen, GitHub Copilot CLI, Hermes, Kimi, Pi, Kiro CLI, Mistral Vibe CLI et les adapters ajoutés plus tard. Ceux qu’il trouve deviennent des design engines candidats, pilotés via stdio avec un adapter par CLI et interchangeables depuis le model picker. Inspiré par [`multica`](https://github.com/multica-ai/multica) et [`cc-switch`](https://github.com/farion1231/cc-switch). Aucune CLI installée ? Le mode API suit la même pipeline, sans spawn local : choisissez Anthropic, OpenAI-compatible, Azure OpenAI ou Google Gemini, et le daemon renvoie les chunks SSE normalisés, avec rejet des destinations loopback / link-local / RFC1918.
|
||||
|
||||
### 2 · Les Skills sont des fichiers, pas des plugins.
|
||||
|
||||
Selon la convention [`SKILL.md`](https://docs.anthropic.com/en/docs/claude-code/skills) de Claude Code, chaque Skill est composé de `SKILL.md` + `assets/` + `references/`. Déposez un dossier dans [`skills/`](skills/), redémarrez le daemon, il apparaît dans le picker. Le `magazine-web-ppt` inclus est [`op7418/guizang-ppt-skill`](https://github.com/op7418/guizang-ppt-skill) committé tel quel, avec licence originale et attribution préservées.
|
||||
Selon la convention [`SKILL.md`](https://docs.anthropic.com/en/docs/claude-code/skills) de Claude Code, un Skill est au minimum un `SKILL.md` ; `assets/` et `references/` sont des side files optionnels. Déposez un dossier dans [`skills/`](skills/), redémarrez le daemon, il apparaît dans le picker. Le `magazine-web-ppt` inclus est [`op7418/guizang-ppt-skill`](https://github.com/op7418/guizang-ppt-skill) committé tel quel, avec licence originale et attribution préservées.
|
||||
|
||||
### 3 · Les Design Systems sont du Markdown portable, pas du JSON de thème.
|
||||
|
||||
Le schéma `DESIGN.md` en 9 sections vient de [`VoltAgent/awesome-design-md`][acd2] : color, typography, spacing, layout, components, motion, voice, brand, anti-patterns. Chaque artifact lit le Design System actif. Changez de Design System, le prochain rendu utilise les nouveaux tokens. Le dropdown embarque **Linear, Stripe, Vercel, Airbnb, Tesla, Notion, Apple, Anthropic, Cursor, Supabase, Figma, Resend, Raycast, Lovable, Cohere, Mistral, ElevenLabs, X.AI, Spotify, Webflow, Sanity, PostHog, Sentry, MongoDB, ClickHouse, Cal, Replicate, Clay, Composio, Xiaohongshu…**, plus 57 design skills issus de [`awesome-design-skills`][ads].
|
||||
Le schéma `DESIGN.md` en 9 sections vient de [`VoltAgent/awesome-design-md`][acd2] : color, typography, spacing, layout, components, motion, voice, brand, anti-patterns. Chaque artifact lit le Design System actif. Changez de Design System, le prochain rendu utilise les nouveaux tokens. Le menu déroulant charge les dossiers `design-systems/*/DESIGN.md` : **Linear, Stripe, Vercel, Airbnb, Tesla, Notion, Apple, Anthropic, Cursor, Supabase, Figma, Resend, Raycast, Lovable, Cohere, Mistral, ElevenLabs, X.AI, Spotify, Webflow, Sanity, PostHog, Sentry, MongoDB, ClickHouse, Cal, Replicate, Clay, Composio, Xiaohongshu…**, ainsi que des design skills normalisés depuis [`awesome-design-skills`][ads].
|
||||
|
||||
### 4 · Le question form évite 80 % des allers-retours.
|
||||
|
||||
|
|
@ -245,8 +245,8 @@ Le daemon lance la CLI avec `cwd` pointant vers le dossier artifact du projet so
|
|||
```text
|
||||
DISCOVERY directives (formulaire tour 1, branche marque tour 2, TodoWrite, critique 5 dimensions)
|
||||
+ identity charter (OFFICIAL_DESIGNER_PROMPT, anti-AI-slop, junior-pass)
|
||||
+ active DESIGN.md (72 Design Systems disponibles)
|
||||
+ active SKILL.md (31 Skills disponibles)
|
||||
+ active DESIGN.md (catalogue Design Systems)
|
||||
+ active SKILL.md (catalogue Skills)
|
||||
+ project metadata (kind, fidelity, speakerNotes, animations, inspiration ids)
|
||||
+ skill side files (pre-flight auto-injecté : lire assets/template.html + references/*.md)
|
||||
+ (deck kind, no skill seed) DECK_FRAMEWORK_DIRECTIVE (nav / counter / scroll / print)
|
||||
|
|
@ -262,12 +262,12 @@ Chaque couche est composable. Chaque couche est un fichier éditable. Lisez [`ap
|
|||
└──────────────┬───────────────────────────────────┬───────────────┘
|
||||
│ /api/* (rewritten in dev) │
|
||||
▼ ▼
|
||||
┌──────────────────────────────────┐ /api/proxy/stream (SSE)
|
||||
│ Local daemon (Express + SQLite) │ ─→ any OpenAI-compat
|
||||
│ │ endpoint (BYOK)
|
||||
┌──────────────────────────────────┐ /api/proxy/{provider}/stream (SSE)
|
||||
│ Local daemon (Express + SQLite) │ ─→ provider-specific APIs
|
||||
│ │ (BYOK)
|
||||
│ /api/agents /api/skills│ w/ SSRF blocking
|
||||
│ /api/design-systems /api/projects/…
|
||||
│ /api/chat (SSE) /api/proxy/stream (SSE)
|
||||
│ /api/chat (SSE) /api/proxy/{provider}/stream (SSE)
|
||||
│ /api/templates /api/import/claude-design
|
||||
│ /api/artifacts/save /api/artifacts/lint
|
||||
│ /api/upload /api/projects/:id/files…
|
||||
|
|
@ -280,7 +280,7 @@ Chaque couche est composable. Chaque couche est un fichier éditable. Lisez [`ap
|
|||
▼
|
||||
┌──────────────────────────────────────────────────────────────────┐
|
||||
│ claude · codex · devin (ACP) · gemini · opencode · cursor-agent │
|
||||
│ qwen · copilot · hermes (ACP) · kimi (ACP) · pi (RPC) · kiro │
|
||||
│ qwen · copilot · hermes (ACP) · kimi (ACP) · pi (RPC) · kiro · vibe (ACP) │
|
||||
│ reads SKILL.md + DESIGN.md, writes artifacts to disk │
|
||||
└──────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
|
@ -290,7 +290,7 @@ Chaque couche est composable. Chaque couche est un fichier éditable. Lisez [`ap
|
|||
| Frontend | Next.js 16 App Router + React 18 + TypeScript, déployable sur Vercel |
|
||||
| Daemon | Node 24 · Express · streaming SSE · `better-sqlite3`; tables `projects` · `conversations` · `messages` · `tabs` · `templates` |
|
||||
| Transport agent | `child_process.spawn`; parseurs typed-event pour `claude-stream-json`, `copilot-stream-json`, `json-event-stream`, `acp-json-rpc`, `pi-rpc`, `plain` |
|
||||
| Proxy BYOK | `POST /api/proxy/stream` → `/v1/chat/completions` compatible OpenAI, pass-through SSE ; rejet loopback / link-local / RFC1918 au bord du daemon |
|
||||
| Proxy BYOK | `POST /api/proxy/{anthropic,openai,azure,google}/stream` → APIs provider-specific, SSE normalisé `delta/end/error` ; rejet loopback / link-local / RFC1918 au bord du daemon |
|
||||
| Stockage | Fichiers simples dans `.od/projects/<id>/` + SQLite dans `.od/app.sqlite` (gitignored, auto-créé). `OD_DATA_DIR` permet l’isolation des tests |
|
||||
| Aperçu | Iframe sandboxée via `srcdoc` + parser `<artifact>` par Skill ([`apps/web/src/artifacts/parser.ts`](apps/web/src/artifacts/parser.ts)) |
|
||||
| Export | HTML (assets inline) · PDF (browser print, deck-aware) · PPTX (piloté par agent via Skill) · ZIP (archiver) · Markdown |
|
||||
|
|
@ -316,8 +316,8 @@ Pour le démarrage desktop/background, les redémarrages sur ports fixes et les
|
|||
Au premier chargement :
|
||||
|
||||
1. OD détecte les CLI d’agents présentes dans votre `PATH` et en choisit une automatiquement.
|
||||
2. Il charge 31 Skills + 72 Design Systems.
|
||||
3. Il affiche le welcome dialog pour coller une clé Anthropic, nécessaire seulement pour le fallback BYOK.
|
||||
2. Il charge les catalogues Skills + Design Systems depuis les dossiers du repo.
|
||||
3. Il affiche le welcome dialog pour configurer une clé API, nécessaire seulement pour le fallback BYOK.
|
||||
4. Il **crée automatiquement `./.od/`**, le dossier runtime local pour la DB SQLite, les artifacts par projet et les rendus enregistrés. Pas d’étape `od init` ; le daemon crée ce dont il a besoin au boot.
|
||||
|
||||
Tapez un prompt, cliquez **Send**, regardez le formulaire arriver, remplissez-le, puis suivez la todo card et le rendu de l’artifact. Cliquez **Save to disk** ou téléchargez le projet en ZIP.
|
||||
|
|
@ -329,6 +329,7 @@ Le daemon possède un dossier caché à la racine du repo. Tout son contenu est
|
|||
```text
|
||||
.od/
|
||||
├── app.sqlite ← projects · conversations · messages · open tabs
|
||||
├── media-config.json ← credentials média / BYOK
|
||||
├── artifacts/ ← rendus ponctuels "Save to disk" (horodatés)
|
||||
└── projects/<id>/ ← dossier de travail par projet, aussi cwd de l’agent
|
||||
```
|
||||
|
|
@ -337,7 +338,7 @@ Le daemon possède un dossier caché à la racine du repo. Tout son contenu est
|
|||
|---|---|
|
||||
| Inspecter ce qu’il contient | `ls -la .od && sqlite3 .od/app.sqlite '.tables'` |
|
||||
| Repartir de zéro | `pnpm tools-dev stop`, `rm -rf .od`, relancer `pnpm tools-dev run web` |
|
||||
| Le déplacer ailleurs | pas encore supporté, le chemin est hard-codé relativement au repo |
|
||||
| Déplacer toutes les données daemon | lancer avec `OD_DATA_DIR=<dir>` ; utilisez `OD_MEDIA_CONFIG_DIR=<dir>` si vous voulez seulement déplacer `media-config.json` |
|
||||
|
||||
Carte complète des fichiers, scripts et dépannage → [`QUICKSTART.fr.md`](QUICKSTART.fr.md).
|
||||
|
||||
|
|
@ -390,7 +391,7 @@ open-design/
|
|||
│ ├── sidecar/ ← primitives runtime sidecar génériques
|
||||
│ └── platform/ ← primitives process/platform génériques
|
||||
│
|
||||
├── skills/ ← 31 bundles SKILL.md (27 prototype + 4 deck)
|
||||
├── skills/ ← bundles SKILL.md chargés par le daemon
|
||||
│ ├── web-prototype/ ← défaut pour le mode prototype
|
||||
│ ├── saas-landing/ dashboard/ pricing-page/ docs-page/ blog-post/
|
||||
│ ├── mobile-app/ mobile-onboarding/ gamified-app/
|
||||
|
|
@ -405,7 +406,7 @@ open-design/
|
|||
│ ├── assets/template.html ← seed
|
||||
│ └── references/{themes,layouts,components,checklist}.md
|
||||
│
|
||||
├── design-systems/ ← 72 Design Systems DESIGN.md
|
||||
├── design-systems/ ← catalogues DESIGN.md chargés par le daemon
|
||||
│ ├── default/ ← Neutral Modern (starter)
|
||||
│ ├── warm-editorial/ ← Warm Editorial (starter)
|
||||
│ ├── linear-app/ vercel/ stripe/ airbnb/ notion/ cursor/ apple/ …
|
||||
|
|
@ -449,10 +450,10 @@ open-design/
|
|||
<img src="docs/assets/design-systems-library.png" alt="Bibliothèque de Design Systems : style guide spread" width="100%" />
|
||||
</p>
|
||||
|
||||
72 Design Systems sont livrés par défaut, chacun sous la forme d’un seul [`DESIGN.md`](design-systems/README.md) :
|
||||
Les Design Systems livrés avec le repo sont chargés depuis [`design-systems/*/DESIGN.md`](design-systems/README.md) :
|
||||
|
||||
<details>
|
||||
<summary><b>Catalogue complet</b> (cliquer pour ouvrir)</summary>
|
||||
<summary><b>Exemples du catalogue</b> (cliquer pour ouvrir)</summary>
|
||||
|
||||
**AI & LLM** : `claude` · `cohere` · `mistral-ai` · `minimax` · `together-ai` · `replicate` · `runwayml` · `elevenlabs` · `ollama` · `x-ai`
|
||||
|
||||
|
|
@ -474,7 +475,7 @@ open-design/
|
|||
|
||||
</details>
|
||||
|
||||
La bibliothèque de product systems est importée depuis [`VoltAgent/awesome-design-md`][acd2] via [`scripts/sync-design-systems.ts`](scripts/sync-design-systems.ts). Relancez ce script pour rafraîchir le catalogue. Les 57 design skills viennent de [`bergside/awesome-design-skills`][ads] et sont ajoutés directement dans `design-systems/`.
|
||||
La bibliothèque de product systems est importée depuis [`VoltAgent/awesome-design-md`][acd2] via [`scripts/sync-design-systems.ts`](scripts/sync-design-systems.ts). Relancez ce script pour rafraîchir le catalogue. Les design skills issus de [`bergside/awesome-design-skills`][ads] sont ajoutés directement dans `design-systems/`.
|
||||
|
||||
## Directions visuelles
|
||||
|
||||
|
|
@ -502,9 +503,9 @@ Trois familles de modèles portent la charge aujourd’hui :
|
|||
| **Vidéo** | `seedance-2.0` | ByteDance Volcengine | t2v + i2v cinématique de 15 s avec audio, shorts narratifs, close-ups personnage, films produit, chorégraphies MV |
|
||||
| **Vidéo** | `hyperframes-html` | [HeyGen / OSS](https://github.com/heygen-com/hyperframes) | Motion graphics HTML→MP4, product reveals, typographie cinétique, data charts, overlays sociaux, logo outros, verticaux TikTok avec captions karaoke |
|
||||
|
||||
Une **galerie de prompts** sous [`prompt-templates/`](prompt-templates/) livre **93 prompts prêts à reproduire** : 43 image, 39 Seedance, 11 HyperFrames. Chaque entrée contient un thumbnail, le prompt body exact, le modèle cible, le ratio d’aspect et un bloc `source` pour licence + attribution. Le daemon les sert via `GET /api/prompt-templates`, et la web app les expose comme grille de cartes dans les onglets **Image templates** et **Video templates**.
|
||||
Une **galerie de prompts** sous [`prompt-templates/`](prompt-templates/) livre des prompts prêts à reproduire pour les surfaces image et vidéo. Chaque entrée contient un thumbnail, le prompt body exact, le modèle cible, le ratio d’aspect et un bloc `source` pour licence + attribution. Le daemon les sert via `GET /api/prompt-templates`, et la web app les expose comme grille de cartes dans les onglets **Image templates** et **Video templates**.
|
||||
|
||||
### gpt-image-2 · galerie image (échantillon de 43)
|
||||
### gpt-image-2 · galerie image (échantillon)
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
|
|
@ -561,14 +562,14 @@ Onze prompts hyperframes sont fournis sous [`prompt-templates/video/hyperframes-
|
|||
|
||||
Le pattern reste le même : choisissez un template, éditez le brief, envoyez. L’agent lit le `skills/hyperframes/SKILL.md` intégré, écrit la composition et livre un MP4. Les thumbnails de catalog blocks sont © HeyGen, servis depuis leur CDN ; le framework OSS est Apache-2.0.
|
||||
|
||||
> **Déjà câblés mais pas encore exposés comme templates :** Kling 2.0 / 1.6 / 1.5, Veo 3 / Veo 2, Sora 2 / Sora 2-Pro (via Fal), MiniMax video-01, tous dans `VIDEO_MODELS` ([`apps/web/src/media/models.ts`](apps/web/src/media/models.ts)). Suno v5 / v4.5, Udio v2, Lyria 2 (music) et gpt-4o-mini-tts, MiniMax TTS (speech) couvrent l’audio. Les templates sont ouverts aux contributions : ajoutez un JSON dans `prompt-templates/video/` ou `prompt-templates/audio/`, il apparaît dans le picker.
|
||||
> **Déjà câblés mais pas encore exposés comme templates :** Kling 2.0 / 1.6 / 1.5, Veo 3 / Veo 2, Sora 2 / Sora 2-Pro (via Fal), MiniMax video-01, tous dans `VIDEO_MODELS` ([`apps/web/src/media/models.ts`](apps/web/src/media/models.ts)). Les modèles audio sont catalogués, mais l’UI audio intégrée expose aujourd’hui les providers speech pris en charge, comme MiniMax et FishAudio. La galerie de templates reste image / vidéo : ajoutez un JSON dans `prompt-templates/video/` pour le faire apparaître dans le picker vidéo.
|
||||
|
||||
## Au-delà du chat
|
||||
|
||||
La boucle chat / artifact est la plus visible, mais plusieurs capacités moins exposées sont déjà câblées :
|
||||
|
||||
- **Import ZIP Claude Design.** Déposez un export de claude.ai sur le welcome dialog. `POST /api/import/claude-design` l’extrait dans un vrai `.od/projects/<id>/`, ouvre le fichier d’entrée en tab et prépare un prompt pour continuer là où Anthropic s’est arrêté.
|
||||
- **Proxy BYOK compatible OpenAI.** `POST /api/proxy/stream` prend `{ baseUrl, apiKey, model, messages }`, normalise le chemin (`…/v1/chat/completions`), renvoie les chunks SSE au navigateur et rejette les destinations loopback / link-local / RFC1918 pour prévenir SSRF.
|
||||
- **Proxy BYOK multi-provider.** `POST /api/proxy/{anthropic,openai,azure,google}/stream` prend `{ baseUrl, apiKey, model, messages }`, construit la requête upstream propre au provider, normalise les chunks SSE vers `delta/end/error` et rejette les destinations loopback / link-local / RFC1918 pour prévenir SSRF.
|
||||
- **Templates utilisateur.** Une fois un rendu validé, `POST /api/templates` prend un snapshot du HTML + metadata dans la table SQLite `templates`. Le projet suivant peut le choisir depuis une ligne « your templates ».
|
||||
- **Persistance des tabs.** Chaque projet mémorise ses fichiers ouverts et son onglet actif dans la table `tabs`.
|
||||
- **Artifact lint API.** `POST /api/artifacts/lint` exécute des checks structurels sur un artifact généré et renvoie des findings que l’agent peut relire au tour suivant.
|
||||
|
|
@ -583,7 +584,7 @@ Tout le mécanisme ci-dessous vient du playbook [`huashu-design`](https://github
|
|||
- **Question form first.** Le tour 1 est seulement `<question-form>`, sans thinking, outils ni narration. L’utilisateur choisit des valeurs par défaut à la vitesse de boutons radio.
|
||||
- **Brand-spec extraction.** Quand l’utilisateur attache un screenshot ou une URL, l’agent suit un protocole en cinq étapes (locate · download · grep hex · codify `brand-spec.md` · vocalise) avant d’écrire du CSS. **Il ne devine jamais les couleurs de marque depuis la mémoire.**
|
||||
- **Critique 5 dimensions.** Avant d’émettre `<artifact>`, l’agent attribue silencieusement un score à sa sortie de 1 à 5 sur philosophie / hiérarchie / exécution / spécificité / retenue. Tout score sous 3/5 est une régression : il faut corriger puis évaluer à nouveau.
|
||||
- **Checklist P0/P1/P2.** Chaque Skill fournit un `references/checklist.md` avec des P0 gates strictes. L’agent doit passer P0 avant d’émettre.
|
||||
- **Checklist P0/P1/P2.** Les Skills qui fournissent des side files peuvent inclure un `references/checklist.md` avec des P0 gates strictes. L’agent doit passer P0 avant d’émettre quand cette checklist existe.
|
||||
- **Slop blacklist.** Gradients violets agressifs, icônes emoji génériques, cartes arrondies avec accent left-border, humains SVG dessinés à la main, Inter comme display face, métriques inventées : explicitement interdits dans le prompt.
|
||||
- **Placeholders honnêtes > fausses stats.** Quand l’agent n’a pas de vrai chiffre, il écrit `N/A` ou un bloc gris libellé, pas « 10× faster ».
|
||||
|
||||
|
|
@ -595,9 +596,9 @@ Tout le mécanisme ci-dessous vient du playbook [`huashu-design`](https://github
|
|||
| Format | Web (claude.ai) | Desktop (Electron) | **Web app + daemon local** |
|
||||
| Déployable sur Vercel | ❌ | ❌ | **✅** |
|
||||
| Runtime agent | Intégré (Opus 4.7) | Intégré ([`pi-ai`][piai]) | **Délégué à la CLI existante de l’utilisateur** |
|
||||
| Skills | Propriétaires | 12 modules TS custom + `SKILL.md` | **31 bundles [`SKILL.md`][skill] file-based, droppables** |
|
||||
| Design System | Propriétaire | `DESIGN.md` (roadmap v0.2) | **72 Design Systems core + 57 design skills normalisés sous `design-systems/`** |
|
||||
| Flexibilité fournisseur | Anthropic seulement | 7+ via [`pi-ai`][piai] | **12 CLI adapters + proxy BYOK compatible OpenAI** |
|
||||
| Skills | Propriétaires | 12 modules TS custom + `SKILL.md` | **Bundles [`SKILL.md`][skill] file-based, droppables** |
|
||||
| Design System | Propriétaire | `DESIGN.md` (roadmap v0.2) | **Catalogue `DESIGN.md` chargé depuis `design-systems/`** |
|
||||
| Flexibilité fournisseur | Anthropic seulement | 7+ via [`pi-ai`][piai] | **CLI adapters + proxy BYOK multi-provider** |
|
||||
| Formulaire initial | ❌ | ❌ | **✅ Règle dure, tour 1** |
|
||||
| Direction picker | ❌ | ❌ | **✅ 5 directions déterministes** |
|
||||
| Todo progress + tool stream live | ❌ | ✅ | **✅** |
|
||||
|
|
@ -626,19 +627,20 @@ Auto-détectés depuis `PATH` au boot du daemon. Aucune config nécessaire. Le d
|
|||
|
||||
| Agent | Bin | Format stream | Forme argv (chemin prompt composé) |
|
||||
|---|---|---|---|
|
||||
| [Claude Code](https://docs.anthropic.com/en/docs/claude-code) | `claude` | `claude-stream-json` | `claude -p <prompt> --output-format stream-json --verbose [--include-partial-messages] [--add-dir …] --permission-mode bypassPermissions` |
|
||||
| [Codex CLI](https://github.com/openai/codex) | `codex` | `json-event-stream` + parseur `codex` | `codex exec --json --skip-git-repo-check --full-auto [-C cwd] [--model …] [-c model_reasoning_effort=…] -` (prompt sur stdin) |
|
||||
| [Claude Code](https://docs.anthropic.com/en/docs/claude-code) | `claude` | `claude-stream-json` | `claude -p --output-format stream-json --verbose [--include-partial-messages] [--add-dir …] --permission-mode bypassPermissions` (prompt sur stdin) |
|
||||
| [Codex CLI](https://github.com/openai/codex) | `codex` | `json-event-stream` + parseur `codex` | `codex exec --json --skip-git-repo-check --full-auto -c sandbox_workspace_write.network_access=true [-C cwd] [--model …] [-c model_reasoning_effort=…]` (prompt sur stdin) |
|
||||
| Devin for Terminal | `devin` | `acp-json-rpc` | `devin --permission-mode dangerous --respect-workspace-trust false acp` |
|
||||
| [Gemini CLI](https://github.com/google-gemini/gemini-cli) | `gemini` | `json-event-stream` + parseur `gemini` | `gemini --output-format stream-json --skip-trust --yolo [--model …] -` |
|
||||
| [Gemini CLI](https://github.com/google-gemini/gemini-cli) | `gemini` | `json-event-stream` + parseur `gemini` | `gemini --output-format stream-json --skip-trust --yolo [--model …]` (prompt sur stdin) |
|
||||
| [OpenCode](https://opencode.ai/) | `opencode` | `json-event-stream` + parseur `opencode` | `opencode run --format json --dangerously-skip-permissions [--model …] -` |
|
||||
| [Cursor Agent](https://www.cursor.com/cli) | `cursor-agent` | `json-event-stream` + parseur `cursor-agent` | `cursor-agent --print --output-format stream-json --stream-partial-output --force --trust [--workspace cwd] [--model …] -` |
|
||||
| [Cursor Agent](https://www.cursor.com/cli) | `cursor-agent` | `json-event-stream` + parseur `cursor-agent` | `cursor-agent --print --output-format stream-json --stream-partial-output --force --trust [--workspace cwd] [--model …]` (prompt sur stdin) |
|
||||
| [Qwen Code](https://github.com/QwenLM/qwen-code) | `qwen` | `plain` | `qwen --yolo [--model …] -` |
|
||||
| [GitHub Copilot CLI](https://github.com/features/copilot/cli) | `copilot` | `copilot-stream-json` | `copilot -p <prompt> --allow-all-tools --output-format json [--model …] [--add-dir …]` |
|
||||
| [GitHub Copilot CLI](https://github.com/features/copilot/cli) | `copilot` | `copilot-stream-json` | `copilot -p - --allow-all-tools --output-format json [--model …] [--add-dir …]` (prompt sur stdin) |
|
||||
| [Hermes](https://github.com/eqlabs/hermes) | `hermes` | `acp-json-rpc` | `hermes acp --accept-hooks` |
|
||||
| Kimi CLI | `kimi` | `acp-json-rpc` | `kimi acp` |
|
||||
| [Kiro CLI](https://kiro.dev) | `kiro-cli` | `acp-json-rpc` | `kiro-cli acp` |
|
||||
| [Mistral Vibe CLI](https://github.com/mistralai/mistral-vibe) | `vibe-acp` | `acp-json-rpc` | `vibe-acp` |
|
||||
| [Pi](https://github.com/mariozechner/pi-ai) | `pi` | `pi-rpc` | `pi --mode rpc --no-session [--model …] [--thinking …]` |
|
||||
| **BYOK compatible OpenAI** | n/a | pass-through SSE | `POST /api/proxy/stream` → `<baseUrl>/v1/chat/completions`, protégé contre loopback / link-local / RFC1918 |
|
||||
| **BYOK multi-provider** | n/a | SSE normalisé | `POST /api/proxy/{provider}/stream` → Anthropic / OpenAI-compatible / Azure OpenAI / Gemini ; protégé contre loopback / link-local / RFC1918 |
|
||||
|
||||
Ajouter une nouvelle CLI revient à ajouter une entrée dans [`apps/daemon/src/agents.ts`](apps/daemon/src/agents.ts). Le format de stream est l’un de `claude-stream-json`, `copilot-stream-json`, `json-event-stream`, `acp-json-rpc`, `pi-rpc` ou `plain`.
|
||||
|
||||
|
|
@ -654,7 +656,7 @@ Chaque projet externe dont ce repo s’inspire. Chaque lien pointe vers la sourc
|
|||
| [**`multica-ai/multica`**](https://github.com/multica-ai/multica) | Architecture daemon + adapter. Détection PATH, daemon local comme seul processus privilégié, vision agent-as-teammate. |
|
||||
| [**`OpenCoworkAI/open-codesign`**][ocod] | Première alternative open source à Claude Design et pair le plus proche. Patterns UX adoptés : streaming-artifact loop, preview iframe sandboxée, panneau agent live, cinq exports, storage hub local, goût injecté par `SKILL.md`. |
|
||||
| [`VoltAgent/awesome-claude-design`][acd] / [`awesome-design-md`][acd2] | Source du schéma `DESIGN.md` en 9 sections et des product systems importés. |
|
||||
| [`bergside/awesome-design-skills`][ads] | Source des 57 design skills ajoutés comme `DESIGN.md` normalisés sous `design-systems/`. |
|
||||
| [`bergside/awesome-design-skills`][ads] | Source des design skills ajoutés comme `DESIGN.md` normalisés sous `design-systems/`. |
|
||||
| [`farion1231/cc-switch`](https://github.com/farion1231/cc-switch) | Inspiration pour la distribution de Skills par symlink entre plusieurs CLI agent. |
|
||||
| [Claude Code skills][skill] | Convention `SKILL.md` adoptée telle quelle. |
|
||||
|
||||
|
|
@ -662,11 +664,11 @@ Le récit long de provenance vit dans [`docs/references.md`](docs/references.md)
|
|||
|
||||
## Roadmap
|
||||
|
||||
- [x] Daemon + détection agents (12 CLI adapters) + registre Skills + catalogue Design Systems
|
||||
- [x] Daemon + détection agents CLI + registre Skills + catalogue Design Systems
|
||||
- [x] Web app + chat + question form + 5-direction picker + todo progress + preview sandboxée
|
||||
- [x] 31 Skills + 72 Design Systems + 5 directions visuelles + 5 device frames
|
||||
- [x] Catalogues Skills + Design Systems + 5 directions visuelles + 5 device frames
|
||||
- [x] Projets · conversations · messages · tabs · templates sur SQLite
|
||||
- [x] Proxy BYOK compatible OpenAI (`/api/proxy/stream`) avec SSRF guard
|
||||
- [x] Proxy BYOK multi-provider (`/api/proxy/{anthropic,openai,azure,google}/stream`) avec SSRF guard
|
||||
- [x] Import ZIP Claude Design (`/api/import/claude-design`)
|
||||
- [x] Sidecar protocol + desktop Electron avec IPC automation
|
||||
- [x] Artifact lint API + gate pre-emit de self-critique 5 dimensions
|
||||
|
|
@ -693,13 +695,13 @@ Si ce projet vous a économisé trente minutes, donnez-lui une ★. Les stars ne
|
|||
|
||||
## Contribuer
|
||||
|
||||
Issues, PRs, nouveaux Skills et nouveaux Design Systems sont bienvenus. Les contributions les plus utiles sont souvent un dossier, un fichier Markdown ou un adapter de taille PR :
|
||||
Issues, PRs, nouveaux Skills et nouveaux Design Systems sont bienvenus. Les contributions les plus utiles sont souvent un dossier, un fichier Markdown ou un petit adapter qui tient dans une PR :
|
||||
|
||||
- **Ajouter un Skill** : déposer un dossier dans [`skills/`](skills/) selon la convention [`SKILL.md`][skill].
|
||||
- **Ajouter un Design System** : déposer un `DESIGN.md` dans [`design-systems/<brand>/`](design-systems/) avec le schéma en 9 sections.
|
||||
- **Brancher une nouvelle coding-agent CLI** : une entrée dans [`apps/daemon/src/agents.ts`](apps/daemon/src/agents.ts).
|
||||
|
||||
Guide complet, critères de merge, style de code et refus fréquents → [`CONTRIBUTING.md`](CONTRIBUTING.md) ([Deutsch](CONTRIBUTING.de.md), [简体中文](CONTRIBUTING.zh-CN.md)).
|
||||
Guide complet, critères de merge, style de code et refus fréquents → [`CONTRIBUTING.fr.md`](CONTRIBUTING.fr.md) ([English](CONTRIBUTING.md), [Deutsch](CONTRIBUTING.de.md), [简体中文](CONTRIBUTING.zh-CN.md)).
|
||||
|
||||
## Contributeurs
|
||||
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
<a href="QUICKSTART.md"><img alt="Quickstart" src="https://img.shields.io/badge/quickstart-3%20commands-green?style=flat-square" /></a>
|
||||
</p>
|
||||
|
||||
<p align="center"><a href="README.md">English</a> · <a href="README.de.md">Deutsch</a> · <a href="README.fr.md">Français</a> · <a href="README.zh-CN.md">简体中文</a> · <a href="README.zh-TW.md">繁體中文</a> · <a href="README.ko.md">한국어</a> · <b>日本語</b> · العربية · <a href="README.ru.md">Русский</a></p>
|
||||
<p align="center"><a href="README.md">English</a> · <a href="README.de.md">Deutsch</a> · <a href="README.fr.md">Français</a> · <a href="README.zh-CN.md">简体中文</a> · <a href="README.zh-TW.md">繁體中文</a> · <a href="README.ko.md">한국어</a> · <b>日本語</b> · العربية · <a href="README.ru.md">Русский</a> · <a href="README.uk.md">Українська</a></p>
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -688,7 +688,7 @@ Issue、PR、新 Skill、新 Design System を歓迎します。最も効果の
|
|||
- **Design System を追加** — [`design-systems/<brand>/`](design-systems/) に 9 セクションスキーマの `DESIGN.md` をドロップ。
|
||||
- **新しい coding-agent CLI を接続** — [`apps/daemon/src/agents.ts`](apps/daemon/src/agents.ts) にエントリを 1 つ追加。
|
||||
|
||||
完全なワークフロー、マージ基準、コードスタイル、受け入れない PR の種類 → [`CONTRIBUTING.ja-JP.md`](CONTRIBUTING.ja-JP.md)（[English](CONTRIBUTING.md) · [简体中文](CONTRIBUTING.zh-CN.md)）。
|
||||
完全なワークフロー、マージ基準、コードスタイル、受け入れない PR の種類 → [`CONTRIBUTING.ja-JP.md`](CONTRIBUTING.ja-JP.md)（[English](CONTRIBUTING.md) · [Deutsch](CONTRIBUTING.de.md) · [Français](CONTRIBUTING.fr.md) · [简体中文](CONTRIBUTING.zh-CN.md)）。
|
||||
|
||||
## コントリビューター
|
||||
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
<a href="QUICKSTART.md"><img alt="Quickstart" src="https://img.shields.io/badge/quickstart-3%20commands-green?style=flat-square" /></a>
|
||||
</p>
|
||||
|
||||
<p align="center"><a href="README.md">English</a> · <a href="README.de.md">Deutsch</a> · <a href="README.fr.md">Français</a> · <a href="README.zh-CN.md">简体中文</a> · <a href="README.zh-TW.md">繁體中文</a> · <b>한국어</b> · <a href="README.ja-JP.md">日本語</a> · العربية · <a href="README.ru.md">Русский</a></p>
|
||||
<p align="center"><a href="README.md">English</a> · <a href="README.de.md">Deutsch</a> · <a href="README.fr.md">Français</a> · <a href="README.zh-CN.md">简体中文</a> · <a href="README.zh-TW.md">繁體中文</a> · <b>한국어</b> · <a href="README.ja-JP.md">日本語</a> · العربية · <a href="README.ru.md">Русский</a> · <a href="README.uk.md">Українська</a></p>
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -689,7 +689,7 @@ daemon 부팅 시 `PATH`에서 자동 감지됩니다. 설정 필요 없음. 스
|
|||
- **디자인 시스템 추가** — 9섹션 스키마를 사용하여 [`design-systems/<brand>/`](design-systems/)에 `DESIGN.md`를 드롭하세요.
|
||||
- **새 코딩 에이전트 CLI 연결** — [`apps/daemon/src/agents.ts`](apps/daemon/src/agents.ts)에 항목 하나 추가.
|
||||
|
||||
전체 설명, 병합 기준, 코드 스타일, 받지 않는 것 → [`CONTRIBUTING.md`](CONTRIBUTING.md) ([Deutsch](CONTRIBUTING.de.md), [简体中文](CONTRIBUTING.zh-CN.md)).
|
||||
전체 설명, 병합 기준, 코드 스타일, 받지 않는 것 → [`CONTRIBUTING.md`](CONTRIBUTING.md) ([Deutsch](CONTRIBUTING.de.md), [Français](CONTRIBUTING.fr.md), [简体中文](CONTRIBUTING.zh-CN.md)).
|
||||
|
||||
## 컨트리뷰터
|
||||
|
||||
|
|
|
|||
|
|
@ -697,7 +697,7 @@ Issues, PRs, new skills, and new design systems are all welcome. The highest-lev
|
|||
- **Add a design system** — drop a `DESIGN.md` into [`design-systems/<brand>/`](design-systems/) using the 9-section schema.
|
||||
- **Wire up a new coding-agent CLI** — one entry in [`apps/daemon/src/agents.ts`](apps/daemon/src/agents.ts).
|
||||
|
||||
Full walkthrough, bar-for-merging, code style, and what we don't accept → [`CONTRIBUTING.md`](CONTRIBUTING.md) ([Deutsch](CONTRIBUTING.de.md), [简体中文](CONTRIBUTING.zh-CN.md)).
|
||||
Full walkthrough, bar-for-merging, code style, and what we don't accept → [`CONTRIBUTING.md`](CONTRIBUTING.md) ([Deutsch](CONTRIBUTING.de.md), [Français](CONTRIBUTING.fr.md), [简体中文](CONTRIBUTING.zh-CN.md)).
|
||||
|
||||
## Contributors
|
||||
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
<a href="QUICKSTART.md"><img alt="Quickstart" src="https://img.shields.io/badge/quickstart-3%20commands-green?style=flat-square" /></a>
|
||||
</p>
|
||||
|
||||
<p align="center"><a href="README.md">English</a> · <a href="README.de.md">Deutsch</a> · <a href="README.fr.md">Français</a> · <a href="README.zh-CN.md">简体中文</a> · <a href="README.zh-TW.md">繁體中文</a> · <a href="README.ko.md">한국어</a> · <a href="README.ja-JP.md">日本語</a> · العربية · <b>Русский</b></p>
|
||||
<p align="center"><a href="README.md">English</a> · <a href="README.de.md">Deutsch</a> · <a href="README.fr.md">Français</a> · <a href="README.zh-CN.md">简体中文</a> · <a href="README.zh-TW.md">繁體中文</a> · <a href="README.ko.md">한국어</a> · <a href="README.ja-JP.md">日本語</a> · العربية · <b>Русский</b> · <a href="README.uk.md">Українська</a></p>
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -697,7 +697,7 @@ Issues, PR, новые skills и новые design systems приветству
|
|||
- **Добавить design system** — положите `DESIGN.md` в [`design-systems/<brand>/`](design-systems/), следуя схеме из 9 разделов.
|
||||
- **Подключить новый coding-agent CLI** — одна запись в [`apps/daemon/src/agents.ts`](apps/daemon/src/agents.ts).
|
||||
|
||||
Полный walkthrough, bar-for-merging, code style и список того, что мы не принимаем → [`CONTRIBUTING.md`](CONTRIBUTING.md) ([Deutsch](CONTRIBUTING.de.md), [简体中文](CONTRIBUTING.zh-CN.md)).
|
||||
Полный walkthrough, bar-for-merging, code style и список того, что мы не принимаем → [`CONTRIBUTING.md`](CONTRIBUTING.md) ([Deutsch](CONTRIBUTING.de.md), [Français](CONTRIBUTING.fr.md), [简体中文](CONTRIBUTING.zh-CN.md)).
|
||||
|
||||
## Участники
|
||||
|
||||
|
|
|
|||
|
|
@ -697,7 +697,7 @@ OD не зупиняється на коді. Та сама поверхня ч
|
|||
- **Додати систему дизайну** — додайте `DESIGN.md` у [`design-systems/<brand>/`](design-systems/) за 9-секційною схемою.
|
||||
- **Підключити новий CLI агент** — один запис у [`apps/daemon/src/agents.ts`](apps/daemon/src/agents.ts).
|
||||
|
||||
Повний посібник, критерії злиття, стиль коду та що ми не приймаємо → [`CONTRIBUTING.md`](CONTRIBUTING.md) ([Deutsch](CONTRIBUTING.de.md), [简体中文](CONTRIBUTING.zh-CN.md)).
|
||||
Повний посібник, критерії злиття, стиль коду та що ми не приймаємо → [`CONTRIBUTING.md`](CONTRIBUTING.md) ([Deutsch](CONTRIBUTING.de.md), [Français](CONTRIBUTING.fr.md), [简体中文](CONTRIBUTING.zh-CN.md)).
|
||||
|
||||
## Контриб'ютори
|
||||
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
<a href="QUICKSTART.md"><img alt="Quickstart" src="https://img.shields.io/badge/quickstart-3%20commands-green?style=flat-square" /></a>
|
||||
</p>
|
||||
|
||||
<p align="center"><a href="README.md">English</a> · <a href="README.de.md">Deutsch</a> · <a href="README.fr.md">Français</a> · <b>简体中文</b> · <a href="README.zh-TW.md">繁體中文</a> · <a href="README.ko.md">한국어</a> · <a href="README.ja-JP.md">日本語</a> · العربية · <a href="README.ru.md">Русский</a></p>
|
||||
<p align="center"><a href="README.md">English</a> · <a href="README.de.md">Deutsch</a> · <a href="README.fr.md">Français</a> · <b>简体中文</b> · <a href="README.zh-TW.md">繁體中文</a> · <a href="README.ko.md">한국어</a> · <a href="README.ja-JP.md">日本語</a> · العربية · <a href="README.ru.md">Русский</a> · <a href="README.uk.md">Українська</a></p>
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -687,7 +687,7 @@ Daemon 启动时从 `PATH` 自动检测，无需配置。流式分发逻辑在 [
|
|||
- **加一套 design system** —— 往 [`design-systems/<brand>/`](design-systems/) 丢一份 `DESIGN.md`，用 9 段式 schema。
|
||||
- **接入一个新的 coding-agent CLI** —— 在 [`apps/daemon/src/agents.ts`](apps/daemon/src/agents.ts) 里加一项。
|
||||
|
||||
完整流程、合并硬线、代码风格、我们不接收的 PR 类型 → [`CONTRIBUTING.zh-CN.md`](CONTRIBUTING.zh-CN.md)（[English](CONTRIBUTING.md)，[Deutsch](CONTRIBUTING.de.md)）。
|
||||
完整流程、合并硬线、代码风格、我们不接收的 PR 类型 → [`CONTRIBUTING.zh-CN.md`](CONTRIBUTING.zh-CN.md)（[English](CONTRIBUTING.md)，[Deutsch](CONTRIBUTING.de.md)，[Français](CONTRIBUTING.fr.md)）。
|
||||
|
||||
## 贡献者墙
|
||||
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
<a href="QUICKSTART.md"><img alt="Quickstart" src="https://img.shields.io/badge/quickstart-3%20commands-green?style=flat-square" /></a>
|
||||
</p>
|
||||
|
||||
<p align="center"><a href="README.md">English</a> · <a href="README.de.md">Deutsch</a> · <a href="README.fr.md">Français</a> · <a href="README.zh-CN.md">简体中文</a> · <b>繁體中文</b> · <a href="README.ko.md">한국어</a> · <a href="README.ja-JP.md">日本語</a> · العربية · <a href="README.ru.md">Русский</a></p>
|
||||
<p align="center"><a href="README.md">English</a> · <a href="README.de.md">Deutsch</a> · <a href="README.fr.md">Français</a> · <a href="README.zh-CN.md">简体中文</a> · <b>繁體中文</b> · <a href="README.ko.md">한국어</a> · <a href="README.ja-JP.md">日本語</a> · العربية · <a href="README.ru.md">Русский</a> · <a href="README.uk.md">Українська</a></p>
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -613,7 +613,7 @@ Daemon 啟動時從 `PATH` 自動檢測，無需配置。流式分發邏輯在 [
|
|||
- **加一套 design system** —— 往 [`design-systems/<brand>/`](design-systems/) 丟一份 `DESIGN.md`，用 9 段式 schema。
|
||||
- **接入一個新的 coding-agent CLI** —— 在 [`apps/daemon/src/agents.ts`](apps/daemon/src/agents.ts) 里加一項。
|
||||
|
||||
完整流程、合併硬線、程式碼風格、我們不接收的 PR 型別 → [`CONTRIBUTING.zh-CN.md`](CONTRIBUTING.zh-CN.md)（[English](CONTRIBUTING.md)，[Deutsch](CONTRIBUTING.de.md)）。
|
||||
完整流程、合併硬線、程式碼風格、我們不接收的 PR 型別 → [`CONTRIBUTING.zh-CN.md`](CONTRIBUTING.zh-CN.md)（[English](CONTRIBUTING.md)，[Deutsch](CONTRIBUTING.de.md)，[Français](CONTRIBUTING.fr.md)）。
|
||||
|
||||
## 貢獻者牆
|
||||
|
||||
|
|
|
|||
|
|
@ -31,17 +31,22 @@ READMEs covers any locale that has a translated README, dict or no dict.
|
|||
| `fa` | فارسی | `fa.ts` | — | active |
|
||||
| `hu` | Magyar | `hu.ts` | — | active |
|
||||
| `ja` | 日本語 | `ja.ts` | `README.ja-JP.md` | active |
|
||||
| `ko` | 한국어 | — | `README.ko.md` | active (README only) |
|
||||
| `ko` | 한국어 | `ko.ts` | `README.ko.md` | active |
|
||||
| `pl` | Polski | `pl.ts` | — | active |
|
||||
| `pt-BR` | Português (Brasil) | `pt-BR.ts` | — | active |
|
||||
| `ru` | Русский | `ru.ts` | `README.ru.md` | active |
|
||||
| `zh-CN` | 简体中文 | `zh-CN.ts` | `README.zh-CN.md` | active |
|
||||
| `zh-TW` | 繁體中文 | `zh-TW.ts` | (in flight, [#194](https://github.com/nexu-io/open-design/pull/194)) | active (UI dict) |
|
||||
| `zh-TW` | 繁體中文 | `zh-TW.ts` | `README.zh-TW.md` | active |
|
||||
| `fr` | Français | `fr.ts` | `README.fr.md` | active |
|
||||
| `uk` | Українська | `uk.ts` | `README.uk.md` | active |
|
||||
|
||||
> A locale may ship a UI dict, a README, or both. The two surfaces are
|
||||
> independent — adding one without the other is a normal contribution.
|
||||
> The English locale is the source of truth; missing UI keys fall back
|
||||
> to English at runtime.
|
||||
> Locales may also add translated core docs or display-only metadata in
|
||||
> `apps/web/src/i18n/content*.ts`; keep those companion surfaces aligned
|
||||
> with the locale's active scope.
|
||||
|
||||
## Adding a new locale
|
||||
|
||||
|
|
|
|||
938
apps/web/src/i18n/content.fr.ts
Normal file
938
apps/web/src/i18n/content.fr.ts
Normal file
|
|
@ -0,0 +1,938 @@
|
|||
import type { PromptTemplateSummary } from '../types';
|
||||
|
||||
export const FR_SKILL_COPY: Record<string, { description?: string; examplePrompt?: string }> = {
|
||||
'audio-jingle': {
|
||||
examplePrompt:
|
||||
'Un jingle indie-pop joyeux de 30 secondes pour le lancement d’un coffee shop — piano électrique chaleureux, batterie aux balais, basse douce et un seul chœur “ahhh” lumineux au refrain. Sans chant. Fin facile à boucler.',
|
||||
description:
|
||||
'Génération audio pour jingles, musiques de fond, voix off et effets sonores. Les demandes de musique partent vers Suno V5 / Udio / Lyria, la voix vers MiniMax TTS / FishAudio / ElevenLabs V3, et les SFX vers ElevenLabs SFX ou AudioCraft. La sortie est un fichier MP3/WAV dans le dossier projet.',
|
||||
},
|
||||
'blog-post': {
|
||||
examplePrompt:
|
||||
'Un article long-form / blog post — masthead, placeholder d’image hero, corps d’article avec figures et pull quotes, ligne auteur, articles associés.',
|
||||
},
|
||||
'critique': {
|
||||
examplePrompt:
|
||||
'Lancez une critique en 5 dimensions du deck magazine-web-ppt qui vient d’être généré — évaluez philosophie / hiérarchie / détail / fonction / innovation et sortez Keep / Fix / Quick wins.',
|
||||
},
|
||||
'dashboard': {
|
||||
examplePrompt:
|
||||
'Dashboard admin / analytics dans un seul fichier HTML.',
|
||||
},
|
||||
'dating-web': {
|
||||
examplePrompt:
|
||||
'Concevez “mutuals” — un site de dating pour créateurs sur X. Dashboard digest quotidien avec stats, bar chart des matchs mutuels et ticker communautaire.',
|
||||
},
|
||||
'design-brief': {},
|
||||
'digital-eguide': {
|
||||
examplePrompt:
|
||||
'Concevez “The Creator’s Style & Format Guide” — page de couverture et page intérieure pour une marque lifestyle creator.',
|
||||
},
|
||||
'docs-page': {
|
||||
examplePrompt:
|
||||
'Une page de documentation — navigation à gauche, zone article scrollable, table des matières à droite.',
|
||||
},
|
||||
'editorial-collage': {
|
||||
examplePrompt:
|
||||
'Concevez une landing page éditoriale dans le style Atelier Zero / Monocle — canvas papier chaud, collage surréaliste plâtre + architecture, grande typographie display serif italique mixée, chiffres romains comme marqueurs de sections et un seul accent corail.',
|
||||
},
|
||||
'editorial-collage-deck': {
|
||||
examplePrompt:
|
||||
'Créez un pitch deck de 11 slides pour “Lumen Field”, un studio de soundscapes de concentration. Cover avec hero plate, deux séparateurs de section, deux slides produit avec bullets, une slide stats avec 12 soundscapes / 4 presets / 1 Daily Ritual, une citation client, un CTA final et une end-card. Réutilisez la bibliothèque d’images d’editorial-collage.',
|
||||
description:
|
||||
'Crée un slide deck single-file dans le langage visuel Atelier Zero : papier chaud, spans accent en serif italique, points finaux corail et plaques de collage surréalistes. Le deck utilise une pagination scroll-snap, une navigation par flèches et espace, un HUD live avec compteur de slides et progress bar, et hérite du stylesheet canonique ainsi que de la bibliothèque d’images à 16 slots du Skill frère `editorial-collage`.',
|
||||
},
|
||||
'email-marketing': {
|
||||
examplePrompt:
|
||||
'Concevez un email de lancement pour une marque de running shoes — masthead, hero, grand headline lockup, grille de specs, CTA.',
|
||||
},
|
||||
'eng-runbook': {
|
||||
examplePrompt:
|
||||
'Rédigez un runbook pour notre service d’auth — alertes, dashboards, procédures standard, rotation on-call.',
|
||||
},
|
||||
'finance-report': {
|
||||
examplePrompt:
|
||||
'Créez un rapport financier Q3 pour un SaaS early-stage — MRR, burn, marge brute, top accounts.',
|
||||
},
|
||||
'gamified-app': {
|
||||
examplePrompt:
|
||||
'Concevez une app gamifiée de life management — prototype mobile multi-screen : cover poster, quêtes du jour avec XP et détail de quête. “Daily quests for becoming a better human.”',
|
||||
},
|
||||
'magazine-web-ppt': {
|
||||
examplePrompt:
|
||||
'Créez-moi un PPT magazine sur “entreprises d’une personne · organisations pliées par l’IA”, talk de 25 minutes, audience designers + founders. Recommandez d’abord une direction (Monocle / WIRED / Kinfolk / Domus / Lab) pour que je choisisse.',
|
||||
},
|
||||
'hatch-pet': {
|
||||
examplePrompt:
|
||||
'Faites éclore un petit pixel-pet — un Shiba amical dans un pull confortable. Utilisez le Skill hatch-pet de bout en bout.',
|
||||
description:
|
||||
'Crée, répare, valide et empaquette une spritesheet de pet animé compatible Codex (atlas 8x9, cellules 192x208), avec contact sheet QA, vidéos preview et pet.json.',
|
||||
},
|
||||
'hr-onboarding': {
|
||||
examplePrompt:
|
||||
'Créez un plan d’onboarding 30 jours pour un nouveau Product Designer dans une startup de 40 personnes.',
|
||||
},
|
||||
'html-ppt': {},
|
||||
'html-ppt-course-module': {},
|
||||
'html-ppt-dir-key-nav-minimal': {},
|
||||
'html-ppt-graphify-dark-graph': {},
|
||||
'html-ppt-hermes-cyber-terminal': {},
|
||||
'html-ppt-knowledge-arch-blueprint': {},
|
||||
'html-ppt-obsidian-claude-gradient': {},
|
||||
'html-ppt-pitch-deck': {},
|
||||
'html-ppt-presenter-mode': {},
|
||||
'html-ppt-product-launch': {},
|
||||
'html-ppt-tech-sharing': {},
|
||||
'html-ppt-testing-safety-alert': {},
|
||||
'html-ppt-weekly-report': {},
|
||||
'html-ppt-xhs-pastel-card': {},
|
||||
'html-ppt-xhs-post': {},
|
||||
'html-ppt-xhs-white-editorial': {},
|
||||
'hyperframes': {
|
||||
examplePrompt:
|
||||
'Product reveal de 5 secondes : produit premium minimaliste sur une surface crème propre, lumière latérale douce, lent push-in caméra, mouvement retenu, aucun overlay texte.',
|
||||
description:
|
||||
'Crée des compositions vidéo, animations, title cards, overlays, sous-titres, voiceovers, visuels audio-réactifs et transitions de scènes en HTML HyperFrames.',
|
||||
},
|
||||
'image-poster': {
|
||||
examplePrompt:
|
||||
'Poster éditorial pour un festival de cinéma indie — silhouette abstraite forte sur papier chaud légèrement grainé ; titre sans-serif composé à la main en haut, dates et lieu du festival en monospace en bas. Palette ocre et encre atténuée.',
|
||||
description:
|
||||
'Génération d’image unique pour posters, key art et illustrations éditoriales. Le défaut est gpt-image-2, mais le workflow reste indépendant du fournisseur.',
|
||||
},
|
||||
'invoice': {
|
||||
examplePrompt:
|
||||
'Créez une facture d’un studio de design freelance pour un client sur un projet d’identité de marque — trois lignes, acompte de 10 %, TVA de 9 %.',
|
||||
},
|
||||
'kanban-board': {
|
||||
examplePrompt:
|
||||
'Créez un Kanban board pour une équipe growth de 5 personnes en plein sprint — Backlog, Doing, Review, Done.',
|
||||
},
|
||||
'magazine-poster': {
|
||||
examplePrompt:
|
||||
'Concevez un poster éditorial style magazine — “You don’t need a designer to ship your first draft anymore.” Papier journal, six sections numérotées.',
|
||||
},
|
||||
'meeting-notes': {
|
||||
examplePrompt:
|
||||
'Rédigez les notes d’un weekly growth de 60 minutes — agenda, décisions, action items avec owners, prochaine réunion.',
|
||||
},
|
||||
'mobile-app': {
|
||||
examplePrompt:
|
||||
'Un écran d’app mobile, rendu dans un frame iPhone 15 Pro pixel-perfect sur la page.',
|
||||
},
|
||||
'mobile-onboarding': {
|
||||
examplePrompt:
|
||||
'Concevez un flow mobile onboarding en 3 écrans pour une app de méditation — welcome, value props, sign-in.',
|
||||
},
|
||||
'motion-frames': {
|
||||
examplePrompt:
|
||||
'Concevez un hero animé — un type ring rotatif autour d’un globe wireframe, avec le headline “Reach every country.” Boucle à 12s, prêt pour export HyperFrames.',
|
||||
},
|
||||
'pm-spec': {
|
||||
examplePrompt:
|
||||
'Rédigez une PRD pour l’authentification à deux facteurs dans notre app SaaS — problème, scope, milestones, questions ouvertes.',
|
||||
},
|
||||
'pptx-html-fidelity-audit': {
|
||||
examplePrompt:
|
||||
'Comparez deck.pptx à deck.html, listez les dérives de layout (overflow de footer, italique manquante, hero non centré) et réexportez avec Footer Rail + Cursor Flow.',
|
||||
},
|
||||
'pricing-page': {
|
||||
examplePrompt:
|
||||
'Une pricing page autonome — header, niveaux de plans, table de comparaison des features et FAQ.',
|
||||
},
|
||||
'replit-deck': {
|
||||
examplePrompt:
|
||||
'Deck HTML single-file à swipe horizontal dans le style de la galerie de templates Replit Slides.',
|
||||
},
|
||||
'saas-landing': {
|
||||
examplePrompt:
|
||||
'Landing page SaaS one-page avec hero, features, social proof, pricing et CTA.',
|
||||
},
|
||||
'simple-deck': {
|
||||
examplePrompt:
|
||||
'Deck HTML single-file à swipe horizontal.',
|
||||
},
|
||||
'social-carousel': {
|
||||
examplePrompt:
|
||||
'Concevez un social carousel cinématique de 3 cartes — “onwards.”, “to the next one.”, “looking ahead.” Carrés 1080×1080, prêts pour Instagram.',
|
||||
},
|
||||
'sprite-animation': {
|
||||
examplePrompt:
|
||||
'Créez une animation à base de sprites avec des anecdotes sur l’histoire de Nintendo. Combinez mascot pixel, texte animé et accent Hanafuda. Couleur et typographie doivent évoquer la marque Nintendo.',
|
||||
},
|
||||
'team-okrs': {
|
||||
examplePrompt:
|
||||
'Créez un OKR tracker pour Q4 — trois Objectives, trois Key Results chacun, progress bars, owners, status pills.',
|
||||
},
|
||||
'tweaks': {
|
||||
examplePrompt:
|
||||
'Ajoutez à cette landing page un Tweak Panel — Accent Color, Type Scale, Density, Light/Dark — et persistez dans localStorage pour conserver le choix après refresh.',
|
||||
},
|
||||
'video-shortform': {
|
||||
examplePrompt:
|
||||
'Product reveal de 5 secondes — une tasse en céramique tourne sur fond papier doux, lumière chaude latérale depuis la gauche, fines particules de poussière dans le rayon. Cinématique, 16:9, lent drift caméra.',
|
||||
description:
|
||||
'Génération vidéo short-form pour clips de 3 à 10 secondes : product reveals, motion teasers et ambient loops.',
|
||||
},
|
||||
'web-prototype': {
|
||||
examplePrompt:
|
||||
'Prototype polyvalent pour desktop web.',
|
||||
},
|
||||
'weekly-update': {
|
||||
examplePrompt:
|
||||
'Créez un deck weekly update pour l’équipe growth — terminé, en cours, blockers, metrics et questions pour la semaine prochaine.',
|
||||
},
|
||||
'wireframe-sketch': {
|
||||
examplePrompt:
|
||||
'Esquissez un wireframe dessiné à la main v0.1 pour un portail — quatre variantes sous forme de tabs sur papier millimétré, headlines au marqueur, annotations sticky-note, placeholders de charts hachurés.',
|
||||
},
|
||||
};
|
||||
|
||||
export const FR_DESIGN_SYSTEM_SUMMARIES: Record<string, string> = {
|
||||
airbnb: 'Marketplace de voyage. Accent corail chaleureux, fortement porté par la photo, UI arrondie.',
|
||||
airtable: 'Hybride spreadsheet / base de données. Coloré, accessible, esthétique de données structurées.',
|
||||
apple: 'Électronique grand public. Espace blanc premium, SF Pro, imagerie cinématique.',
|
||||
'atelier-zero':
|
||||
'Système de studio éditorial. Canvas papier chaud, collage surréaliste plâtre + architecture, typographie display serif italique mixée, chiffres romains comme marqueurs de sections et un seul accent corail — fait pour landing pages magazine, sites de studio et pages manifeste.',
|
||||
binance: 'Exchange crypto. Accent jaune fort sur monochrome, urgence trading-floor.',
|
||||
bmw: 'Automobile de luxe. Surfaces dark premium, esthétique d’engineering allemand précis.',
|
||||
bugatti: 'Marque hypercar. Toile cinématique sombre, rigueur monochrome, typographie display monumentale.',
|
||||
cal: 'Scheduling open-source. UI neutre propre, simplicité orientée développeur.',
|
||||
claude: 'Assistant IA d’Anthropic. Accent terracotta chaud, layout éditorial clair.',
|
||||
clay: 'Agence créative. Formes organiques, gradients doux, mise en page très éditoriale et dirigée.',
|
||||
clickhouse: 'Base analytics rapide. Style documentation technique avec accent jaune.',
|
||||
cohere: 'Plateforme IA enterprise. Gradients vivants, esthétique dashboard riche en données.',
|
||||
coinbase: 'Exchange crypto. Identité bleue claire, confiance, sensation institutionnelle.',
|
||||
composio: 'Plateforme d’intégrations d’outils. Dark moderne avec icônes d’intégration colorées.',
|
||||
cursor: 'Éditeur de code AI-first. Interface dark fine, accents en gradient.',
|
||||
default:
|
||||
'Défaut propre et orienté produit. À utiliser quand le brief ne demande pas d’ambiance précise — bon pour outils B2B, dashboards et pages utility.',
|
||||
elevenlabs: 'Plateforme IA voice. UI sombre cinématique, esthétique waveform audio.',
|
||||
expo: 'Plateforme React Native. Thème sombre, tracking serré, centré code.',
|
||||
ferrari: 'Automobile de luxe. Éditorial chiaroscuro, accents Ferrari Red, noir cinématique.',
|
||||
figma: 'Outil de design collaboratif. Multicolore vif, joueur et professionnel.',
|
||||
framer: 'Website builder. Noir et bleu audacieux, motion-first, orienté design.',
|
||||
hashicorp: 'Automatisation d’infrastructure. Look enterprise propre, noir et blanc.',
|
||||
ibm: 'Technologie enterprise. Carbon Design System, palette bleue structurée.',
|
||||
intercom: 'Customer messaging. Palette bleue amicale, patterns UI conversationnels.',
|
||||
kami:
|
||||
'Système papier éditorial. Canvas papier chaud, accent bleu encre, serif à une seule graisse — fait pour CV, one-pagers, white papers, portfolios et slide decks.',
|
||||
kraken: 'Trading crypto. UI sombre avec accent violet, dashboards riches en données.',
|
||||
lamborghini: 'Marque supercar. Surfaces noir profond, accents or, typographie uppercase dramatique.',
|
||||
'linear-app': 'Project management. Ultraminimal, précis, accent violet.',
|
||||
lovable: 'Builder full-stack IA. Gradients ludiques, esthétique dev amicale.',
|
||||
mastercard: 'Réseau global de paiement. Canvas papier chaud, formes pill orbitales, chaleur éditoriale.',
|
||||
meta: 'Tech retail store. Centré photographie, surfaces clair/dark binaires, CTA Meta Blue.',
|
||||
minimax: 'Fournisseur de modèles IA. Interface dark audacieuse avec accents néon.',
|
||||
mintlify: 'Plateforme de documentation. Propre, accent vert, optimisée pour la lecture.',
|
||||
miro: 'Collaboration visuelle. Accent jaune lumineux, esthétique infinite canvas.',
|
||||
'mistral-ai': 'Fournisseur LLM open-weight. Minimalisme construit à la française, teinté violet.',
|
||||
mongodb: 'Base documentaire. Branding feuille verte, centré sur la documentation développeur.',
|
||||
nike: 'Retail sport. UI monochrome, uppercase massive, photographie full-bleed.',
|
||||
notion: 'Workspace all-in-one. Minimalisme chaud, headings serif, surfaces douces.',
|
||||
nvidia: 'GPU computing. Énergie vert-noir, esthétique de puissance technique.',
|
||||
ollama: 'Exécuter des LLMs localement. Terminal-first, simplicité monochrome.',
|
||||
'opencode-ai': 'Plateforme IA coding. Thème dark centré développeur.',
|
||||
pinterest: 'Découverte visuelle. Accent rouge, masonry grid, focus image.',
|
||||
playstation:
|
||||
'Retail console gaming. Layout à trois surfaces, autorité calme en typographie display, hover scale cyan.',
|
||||
posthog: 'Product analytics. Branding ludique, UI dark developer-friendly.',
|
||||
raycast: 'Launcher de productivité. Chrome dark élégant, accents gradient vifs.',
|
||||
renault: 'Automobile française. Gradients aurora vivants, typographie NouvelR, énergie forte.',
|
||||
replicate: 'Exécuter des modèles ML par API. Canvas blanc propre, orienté code.',
|
||||
resend: 'API email. Thème dark minimaliste, accents monospace.',
|
||||
revolut: 'Banque digitale. Interface dark fine, cartes gradient, précision fintech.',
|
||||
runwayml: 'Génération vidéo IA. UI dark cinématique, layout riche en médias.',
|
||||
sanity: 'Headless CMS. Accent rouge, layout éditorial content-first.',
|
||||
sentry: 'Monitoring d’erreurs. Dashboard dark, riche en données, accent rose-violet.',
|
||||
shopify: 'Plateforme e-commerce. Dark-first et cinématique, accent vert néon, type ultralégère.',
|
||||
spacex: 'Technologie spatiale. Noir et blanc stricts, imagerie full-bleed, futuriste.',
|
||||
spotify: 'Streaming musical. Vert vivant sur dark, type forte, piloté par album art.',
|
||||
starbucks:
|
||||
'Marque café retail globale. Système vert à quatre niveaux, canvas papier chaud, boutons full-pill.',
|
||||
stripe: 'Infrastructure paiement. Gradients violets signature, élégance en weight 300.',
|
||||
supabase: 'Alternative Firebase open-source. Thème dark émeraude, code-first.',
|
||||
superhuman: 'Client email rapide. UI dark premium, keyboard-first, glow violet.',
|
||||
tesla: 'Automobile électrique. Réduction radicale, photographie full-viewport, presque aucune UI.',
|
||||
theverge:
|
||||
'Média tech éditorial. Accents acid mint et ultraviolet, display Manuka, story tiles façon rave flyer.',
|
||||
'together-ai': 'Infrastructure IA open-source. Technique, design proche blueprint.',
|
||||
uber: 'Plateforme de mobilité. Noir et blanc francs, type serrée, énergie urbaine.',
|
||||
vercel: 'Déploiement frontend. Précision noir et blanc, Geist Font.',
|
||||
vodafone: 'Marque télécom globale. Typographie display uppercase monumentale, bandes Vodafone Red.',
|
||||
voltagent: 'Framework d’agents IA. Fond noir profond, accent émeraude, pensé comme un terminal natif.',
|
||||
'warm-editorial':
|
||||
'Esthétique magazine portée par la serif. Accent terracotta sur papier off-white chaud — bon pour long-form, éditorial et pages marketing portées par la marque.',
|
||||
warp: 'Terminal moderne. Interface dark type IDE, command UI en blocs.',
|
||||
webflow: 'Visual web builder. Accent bleu, esthétique marketing-site polie.',
|
||||
wired: 'Magazine tech. Densité broadsheet sur blanc papier, custom serif display, kicker mono, liens bleu encre.',
|
||||
wise: 'Transfert d’argent. Accent vert lumineux, amical et clair.',
|
||||
'x-ai': 'Lab IA d’Elon Musk. Look monochrome strict, minimalisme futuriste.',
|
||||
xiaohongshu: 'Plateforme social lifestyle UGC. Rouge de marque singulier, radius généreux, content-first.',
|
||||
zapier: 'Plateforme d’automatisation. Orange chaud, amical, porté par l’illustration.',
|
||||
};
|
||||
|
||||
export const FR_DESIGN_SYSTEM_CATEGORIES: Record<string, string> = {
|
||||
Starter: 'Starter',
|
||||
'AI & LLM': 'AI & LLM',
|
||||
'Bold & Expressive': 'Audacieux & expressif',
|
||||
'Creative & Artistic': 'Créatif & artistique',
|
||||
'Developer Tools': 'Developer Tools',
|
||||
'Layout & Structure': 'Layout & structure',
|
||||
'Modern & Minimal': 'Moderne & minimal',
|
||||
'Morphism & Effects': 'Morphism & effets',
|
||||
'Productivity & SaaS': 'Productivité & SaaS',
|
||||
'Professional & Corporate': 'Professionnel & corporate',
|
||||
'Backend & Data': 'Backend & data',
|
||||
'Design & Creative': 'Design & créativité',
|
||||
'Fintech & Crypto': 'Fintech & crypto',
|
||||
'E-Commerce & Retail': 'E-commerce & retail',
|
||||
'Media & Consumer': 'Médias & grand public',
|
||||
Automotive: 'Automobile',
|
||||
'Editorial & Print': 'Éditorial & print',
|
||||
'Editorial · Studio': 'Éditorial · Studio',
|
||||
'Retro & Nostalgic': 'Rétro & nostalgique',
|
||||
'Themed & Unique': 'Thématique & unique',
|
||||
Uncategorized: 'Non catégorisé',
|
||||
};
|
||||
|
||||
export const FR_SKILL_IDS_WITH_EN_FALLBACK = [
|
||||
'html-ppt-taste-brutalist',
|
||||
'html-ppt-taste-editorial',
|
||||
'web-prototype-taste-brutalist',
|
||||
'web-prototype-taste-editorial',
|
||||
'web-prototype-taste-soft',
|
||||
] as const;
|
||||
|
||||
export const FR_DESIGN_SYSTEM_IDS_WITH_EN_FALLBACK = [
|
||||
'agentic',
|
||||
'ant',
|
||||
'application',
|
||||
'arc',
|
||||
'artistic',
|
||||
'bento',
|
||||
'bold',
|
||||
'brutalism',
|
||||
'cafe',
|
||||
'canva',
|
||||
'claymorphism',
|
||||
'clean',
|
||||
'colorful',
|
||||
'contemporary',
|
||||
'corporate',
|
||||
'cosmic',
|
||||
'creative',
|
||||
'dashboard',
|
||||
'discord',
|
||||
'dithered',
|
||||
'doodle',
|
||||
'dramatic',
|
||||
'duolingo',
|
||||
'editorial',
|
||||
'elegant',
|
||||
'energetic',
|
||||
'enterprise',
|
||||
'expressive',
|
||||
'fantasy',
|
||||
'flat',
|
||||
'friendly',
|
||||
'futuristic',
|
||||
'github',
|
||||
'glassmorphism',
|
||||
'gradient',
|
||||
'huggingface',
|
||||
'levels',
|
||||
'lingo',
|
||||
'luxury',
|
||||
'material',
|
||||
'minimal',
|
||||
'modern',
|
||||
'mono',
|
||||
'neobrutalism',
|
||||
'neon',
|
||||
'neumorphism',
|
||||
'openai',
|
||||
'pacman',
|
||||
'paper',
|
||||
'perspective',
|
||||
'premium',
|
||||
'professional',
|
||||
'publication',
|
||||
'refined',
|
||||
'retro',
|
||||
'shadcn',
|
||||
'simple',
|
||||
'skeumorphism',
|
||||
'sleek',
|
||||
'spacious',
|
||||
'storytelling',
|
||||
'tetris',
|
||||
'vibrant',
|
||||
'vintage',
|
||||
] as const;
|
||||
|
||||
export const FR_PROMPT_TEMPLATE_CATEGORIES: Record<string, string> = {
|
||||
Infographic: 'Infographie',
|
||||
'Anime / Manga': 'Anime / manga',
|
||||
'App / Web Design': 'App / web design',
|
||||
'Game UI': 'Game UI',
|
||||
Illustration: 'Illustration',
|
||||
'Profile / Avatar': 'Profil / avatar',
|
||||
'Social Media Post': 'Post réseaux sociaux',
|
||||
General: 'Général',
|
||||
Advertising: 'Publicité',
|
||||
'Motion Graphics': 'Motion graphics',
|
||||
Cinematic: 'Cinématique',
|
||||
'VFX / Fantasy': 'VFX / fantasy',
|
||||
Anime: 'Anime',
|
||||
'Social / Meme': 'Social / meme',
|
||||
Branding: 'Branding',
|
||||
Data: 'Data',
|
||||
Marketing: 'Marketing',
|
||||
Product: 'Produit',
|
||||
'Short Form': 'Short form',
|
||||
Travel: 'Voyage',
|
||||
};
|
||||
|
||||
export const FR_PROMPT_TEMPLATE_IDS_WITH_EN_FALLBACK = [] as const;
|
||||
|
||||
export const FR_PROMPT_TEMPLATE_TAGS: Record<string, string> = {
|
||||
'3d': '3D',
|
||||
'3d-render': 'rendu 3D',
|
||||
action: 'action',
|
||||
'ancient-china': 'Chine ancienne',
|
||||
anime: 'anime',
|
||||
'app-showcase': 'app showcase',
|
||||
archery: 'tir à l’arc',
|
||||
arpg: 'ARPG',
|
||||
'audio-reactive': 'audio-réactif',
|
||||
'boss-fight': 'boss fight',
|
||||
brand: 'brand',
|
||||
branding: 'branding',
|
||||
captions: 'sous-titres',
|
||||
cavalry: 'cavalerie',
|
||||
chart: 'chart',
|
||||
childlike: 'enfantin',
|
||||
choreography: 'chorégraphie',
|
||||
cinematic: 'cinématique',
|
||||
'cinematic-romance': 'romance cinématique',
|
||||
combat: 'combat',
|
||||
combo: 'combo',
|
||||
'companion-to-image': 'companion to image',
|
||||
counter: 'counter',
|
||||
crayon: 'crayon',
|
||||
cyberpunk: 'cyberpunk',
|
||||
dance: 'danse',
|
||||
'data-viz': 'data-viz',
|
||||
editorial: 'éditorial',
|
||||
'elden-ring': 'Elden Ring',
|
||||
endcard: 'end card',
|
||||
escort: 'escort',
|
||||
'escort-mission': 'mission d’escorte',
|
||||
fantasy: 'fantasy',
|
||||
fashion: 'mode',
|
||||
'fighting-game': 'jeu de combat',
|
||||
food: 'food',
|
||||
'game-cinematic': 'cinématique jeu',
|
||||
'game-ui': 'game UI',
|
||||
'grid-sheet': 'grid sheet',
|
||||
guanyu: 'Guanyu',
|
||||
'hand-drawn': 'dessiné à la main',
|
||||
hud: 'HUD',
|
||||
'hud-safe': 'HUD-safe',
|
||||
hype: 'hype',
|
||||
hyperframes: 'HyperFrames',
|
||||
idol: 'idol',
|
||||
illustration: 'illustration',
|
||||
'image-to-image': 'image-to-image',
|
||||
infographic: 'infographie',
|
||||
japanese: 'japonais',
|
||||
karaoke: 'karaoké',
|
||||
'key-visual': 'key visual',
|
||||
'kinetic-typography': 'typographie cinétique',
|
||||
'linear-style': 'style Linear',
|
||||
logo: 'logo',
|
||||
lyubu: 'Lyu Bu',
|
||||
map: 'carte',
|
||||
marketing: 'marketing',
|
||||
minimal: 'minimal',
|
||||
mmo: 'MMO',
|
||||
mobile: 'mobile',
|
||||
money: 'argent',
|
||||
'mounted-combat': 'combat monté',
|
||||
nature: 'nature',
|
||||
'open-world': 'open world',
|
||||
'otaku-dance': 'danse otaku',
|
||||
outro: 'outro',
|
||||
overlay: 'overlay',
|
||||
pipeline: 'pipeline',
|
||||
'pose-reference': 'référence de pose',
|
||||
portrait: 'portrait',
|
||||
product: 'produit',
|
||||
'product-promo': 'promo produit',
|
||||
rework: 'rework',
|
||||
route: 'itinéraire',
|
||||
saas: 'SaaS',
|
||||
sequence: 'séquence',
|
||||
sizzle: 'sizzle',
|
||||
social: 'social',
|
||||
storyboard: 'storyboard',
|
||||
'street-fighter': 'Street Fighter',
|
||||
'style-transfer': 'style transfer',
|
||||
tekken: 'Tekken',
|
||||
'three-kingdoms': 'Trois Royaumes',
|
||||
tiktok: 'TikTok',
|
||||
'title-card': 'title card',
|
||||
transform: 'transformation',
|
||||
travel: 'voyage',
|
||||
tts: 'TTS',
|
||||
typography: 'typographie',
|
||||
'unreal-engine-5': 'Unreal Engine 5',
|
||||
vertical: 'vertical',
|
||||
'video-reference': 'référence vidéo',
|
||||
'vs-screen': 'VS screen',
|
||||
'website-to-video': 'website-to-video',
|
||||
wuxia: 'wuxia',
|
||||
zhaoyun: 'Zhaoyun',
|
||||
};
|
||||
|
||||
export const FR_PROMPT_TEMPLATE_COPY: Record<string, Partial<Pick<PromptTemplateSummary, 'summary' | 'title'>>> = {
|
||||
'3d-stone-staircase-evolution-infographic': {
|
||||
title: 'Infographie 3D d’une évolution en escalier de pierre',
|
||||
summary:
|
||||
'Transforme une timeline d’évolution plate en infographie 3D réaliste en escalier de pierre, avec rendus détaillés d’organismes et panneaux latéraux structurés.',
|
||||
},
|
||||
'anime-martial-arts-battle-illustration': {
|
||||
title: 'Illustration anime de combat d’arts martiaux',
|
||||
summary:
|
||||
'Génère une illustration anime dynamique et impactante de deux personnages féminins qui combattent dans un dojo traditionnel avec effets d’énergie élémentaire.',
|
||||
},
|
||||
'e-commerce-live-stream-ui-mockup': {
|
||||
title: 'Mockup d’interface de livestream e-commerce',
|
||||
summary:
|
||||
'Génère une interface réaliste de livestream social media au-dessus d’un portrait, avec messages de chat personnalisables, popups de cadeaux et carte d’achat produit.',
|
||||
},
|
||||
'illustrated-city-food-map': {
|
||||
title: 'Carte culinaire illustrée d’une ville',
|
||||
summary:
|
||||
'Génère une tourist map dessinée à la main en style aquarelle, avec spécialités locales numérotées, points d’intérêt et légende.',
|
||||
},
|
||||
'infographic-otaku-dance-choreography-breakdown-gokurakujodo-16-panels': {},
|
||||
'momotaro-explainer-slide-in-hybrid-style': {
|
||||
title: 'Slide explicative Momotaro en style hybride',
|
||||
summary:
|
||||
'Combine l’esthétique simple et chaleureuse des illustrations Irasutoya avec la densité d’information des slides administratives japonaises.',
|
||||
},
|
||||
'profile-avatar-anime-girl-to-cinematic-photo': {
|
||||
title: 'Profil / avatar - Anime girl vers photo cinématique',
|
||||
summary:
|
||||
'Transforme une illustration de personnage en portrait réaliste vintage d’intérieur, avec tons chauds, tout en préservant tenue, pose et chat.',
|
||||
},
|
||||
'profile-avatar-casual-fashion-grid-photoshoot': {
|
||||
title: 'Profil / avatar - Shooting photo mode casual en grille',
|
||||
summary:
|
||||
'Prompt JSON structuré pour un collage de 4 photos d’un shooting photo mode casual, avec paramètres détaillés pour la personne et la lumière.',
|
||||
},
|
||||
'profile-avatar-cinematic-south-asian-male-portrait-with-vultures': {
|
||||
title: 'Profil / avatar - Portrait cinématique sud-asiatique avec vautours',
|
||||
summary:
|
||||
'Portrait cinématique détaillé d’un jeune homme sud-asiatique dans une scène dark fantasy, entouré de vautours et corbeaux.',
|
||||
},
|
||||
'profile-avatar-cyberpunk-anime-portrait-with-neon-face-text': {
|
||||
title: 'Profil / avatar - Portrait anime cyberpunk avec texte néon sur le visage',
|
||||
summary:
|
||||
'Portrait anime stylé baigné de néon pour poster, social media art ou visuels de branding futuriste.',
|
||||
},
|
||||
'profile-avatar-elegant-fantasy-girl-in-violet-garden': {
|
||||
title: 'Profil / avatar - Fantasy girl élégante dans un jardin violet',
|
||||
summary:
|
||||
'Génère un portrait anime fantasy poli d’une femme élégante, cheveux brillants coiffés, tenue violet-noir et jardin floral magique.',
|
||||
},
|
||||
'profile-avatar-ethereal-blue-haired-fantasy-portrait': {
|
||||
title: 'Profil / avatar - Portrait fantasy éthéré aux cheveux bleus',
|
||||
summary:
|
||||
'Génère un portrait anime fantasy doux et lumineux pour key art vertical élégant ou illustration de personnage aux cheveux fluides.',
|
||||
},
|
||||
'profile-avatar-glamorous-woman-in-black-portrait': {
|
||||
title: 'Profil / avatar - Portrait glamour d’une femme en noir',
|
||||
summary:
|
||||
'Génère un portrait luxe photoréaliste d’une femme élégante en tenue noire, idéal pour éditorial mode ou visuels beauté.',
|
||||
},
|
||||
'profile-avatar-hyper-realistic-selfie-texture-prompts': {
|
||||
title: 'Profil / avatar - Prompts de texture selfie hyperréaliste',
|
||||
summary:
|
||||
'Snippets de prompt détaillés pour textures de peau réalistes et cadrage selfie smartphone authentique avec pores visibles et lumière naturelle.',
|
||||
},
|
||||
'profile-avatar-lavender-fantasy-mage-portrait': {
|
||||
title: 'Profil / avatar - Portrait de mage fantasy lavande',
|
||||
summary:
|
||||
'Génère un portrait anime fantasy poli d’une princesse mage élégante avec cheveux blonds, fleurs violettes et vêtements cristallins.',
|
||||
},
|
||||
'profile-avatar-monochrome-studio-portrait': {
|
||||
title: 'Profil / avatar - Portrait studio monochrome',
|
||||
summary:
|
||||
'Prompt de photographie commerciale haut de gamme pour portrait monochrome, arrière-plan fortement divisé et lumière studio dramatique.',
|
||||
},
|
||||
'profile-avatar-old-photo-restoration-to-dslr-portrait': {
|
||||
title: 'Profil / avatar - Restauration d’ancienne photo vers portrait DSLR',
|
||||
summary:
|
||||
'Restaure une photo familiale vintage endommagée de quatre personnes en portrait réaliste propre, colorisé et haute résolution.',
|
||||
},
|
||||
'profile-avatar-poetic-woman-in-garden-portrait': {
|
||||
title: 'Profil / avatar - Portrait poétique d’une femme au jardin',
|
||||
summary:
|
||||
'Génère un portrait éditorial réaliste d’une jeune femme lettrée dans un jardin ensoleillé, idéal pour lifestyle photography ou literary branding.',
|
||||
},
|
||||
'profile-avatar-professional-identity-portrait-wallpaper': {
|
||||
title: 'Profil / avatar - Fond d’écran portrait d’identité professionnelle',
|
||||
summary:
|
||||
'Génère un fond d’écran premium haute résolution avec une personne en tenue professionnelle, activités métiers et typographie.',
|
||||
},
|
||||
'profile-avatar-realistically-imperfect-ai-selfie': {
|
||||
title: 'Profil / avatar - Selfie IA réalistement imparfait',
|
||||
summary:
|
||||
'Prompt GPT-image-2 créatif pour un selfie “raté” qui ressemble à un instantané smartphone accidentel de basse qualité.',
|
||||
},
|
||||
'profile-avatar-signed-marker-portrait-on-shikishi': {
|
||||
title: 'Profil / avatar - Portrait marker signé sur shikishi',
|
||||
summary:
|
||||
'Génère un portrait marker vivant et signé sur shikishi carré, pour fan art autographié et visuel de remerciement personnel.',
|
||||
},
|
||||
'profile-avatar-snow-rabbit-empress-portrait': {
|
||||
title: 'Profil / avatar - Portrait d’impératrice lapin des neiges',
|
||||
summary:
|
||||
'Prompt de portrait fantasy réaliste d’une femme royale à motif lapin, en hanfu hivernal devant un temple de montagne enneigé.',
|
||||
},
|
||||
'profile-avatar-snow-rabbit-mask-hanfu-portrait': {
|
||||
title: 'Profil / avatar - Portrait hanfu avec masque lapin des neiges',
|
||||
summary:
|
||||
'Génère un portrait fantasy hivernal cinématique d’une femme masquée en hanfu blanc à motif lapin, idéal pour character art élégant.',
|
||||
},
|
||||
'profile-avatar-snowy-rabbit-hanfu-portrait': {
|
||||
title: 'Profil / avatar - Portrait hanfu lapin enneigé',
|
||||
summary:
|
||||
'Génère un portrait fantasy beauty ultradétaillé d’une femme aux oreilles de lapin en hanfu brodé, pour character art ou costume design.',
|
||||
},
|
||||
'profile-avatar-snowy-rabbit-spirit-portrait': {
|
||||
title: 'Profil / avatar - Portrait d’esprit lapin enneigé',
|
||||
summary:
|
||||
'Génère un portrait fantasy calme d’une femme anonyme aux oreilles de lapin en hiver, idéal pour character art atmosphérique.',
|
||||
},
|
||||
'profile-avatar-song-dynasty-hanfu-portrait': {
|
||||
title: 'Profil / avatar - Portrait hanfu de la dynastie Song',
|
||||
summary:
|
||||
'Prompt optimisé pour portrait réaliste détaillé d’une beauté en hanfu traditionnel de la dynastie Song dans une cour antique.',
|
||||
},
|
||||
'social-media-post-anime-pokemon-shop-outfit-teaser-poster': {
|
||||
title: 'Post réseaux sociaux - Teaser outfit anime dans un Pokémon shop',
|
||||
summary:
|
||||
'Génère un poster d’annonce fashion anime doux et pastel, avec visage flouté dans un Pokémon Store.',
|
||||
},
|
||||
'social-media-post-cinematic-elevator-scene': {
|
||||
title: 'Post réseaux sociaux - Scène d’ascenseur cinématique',
|
||||
summary:
|
||||
'Prompt pour une scène sombre et cinématique d’une femme dans un ascenseur métallique, avec lumière et reflets réalistes.',
|
||||
},
|
||||
'social-media-post-confused-elf-girl-at-pastel-desk': {
|
||||
title: 'Post réseaux sociaux - Elf girl confuse à un bureau pastel',
|
||||
summary:
|
||||
'Génère une illustration anime pastel douce d’une elf girl à l’ordinateur dans un workspace kawaii confortable.',
|
||||
},
|
||||
'social-media-post-editorial-fashion-photography': {
|
||||
title: 'Post réseaux sociaux - Photographie fashion éditoriale',
|
||||
summary:
|
||||
'Prompt atmosphérique centré fashion pour une scène studio minimaliste avec lumière douce et tons chauds.',
|
||||
},
|
||||
'social-media-post-fashion-editorial-collage': {
|
||||
title: 'Post réseaux sociaux - Collage fashion editorial',
|
||||
summary:
|
||||
'Prompt très détaillé de collage photo 2x2 pour prises fashion editorial, avec styling cohérent, lumière spécifique et visage de référence.',
|
||||
},
|
||||
'social-media-post-psg-transfer-announcement-poster': {
|
||||
title: 'Post réseaux sociaux - Poster d’annonce de transfert PSG',
|
||||
summary:
|
||||
'Poster football professionnel et puissant pour annoncer la signature d’un joueur au Paris Saint-Germain.',
|
||||
},
|
||||
'social-media-post-showa-day-retro-culture-magazine-cover': {
|
||||
title: 'Post réseaux sociaux - Couverture magazine rétro culture pour Showa Day',
|
||||
summary:
|
||||
'Page éditoriale chaleureuse sur une fête japonaise, avec character art anime, rue nostalgique de l’ère Showa et layout magazine.',
|
||||
},
|
||||
'social-media-post-social-media-fashion-outfit-generation': {
|
||||
title: 'Post réseaux sociaux - Génération d’outfits fashion',
|
||||
summary:
|
||||
'Prompt pour générer une semaine de recommandations d’outfits de fashion blogger à partir d’un profil personnage, avec labels et prix.',
|
||||
},
|
||||
'social-media-post-travel-snapshot-collage-prompt': {
|
||||
title: 'Post réseaux sociaux - Collage de snapshots de voyage',
|
||||
summary:
|
||||
'Prompt détaillé pour un collage nostalgique en 12 frames de photos de voyage solo façon smartphone.',
|
||||
},
|
||||
'social-media-post-vintage-sign-painter-sketch': {
|
||||
title: 'Post réseaux sociaux - Croquis vintage de sign painter',
|
||||
summary:
|
||||
'Génère un croquis marker dessiné à la main sur papier, avec détails réalistes comme lignes graphite et saignement d’encre.',
|
||||
},
|
||||
'vr-headset-exploded-view-poster': {
|
||||
title: 'Poster vue éclatée d’un casque VR',
|
||||
summary:
|
||||
'Génère un diagramme high-tech en vue éclatée d’un casque VR, avec callouts détaillés de composants et texte promotionnel.',
|
||||
},
|
||||
'3d-animated-boy-building-lego': {
|
||||
title: 'Garçon animé 3D construisant des Lego',
|
||||
summary:
|
||||
'Prompt vidéo multi-shot en style animation 3D décrivant un garçon qui assemble soigneusement des briques Lego dans une chambre, avec effets time-lapse.',
|
||||
},
|
||||
'a-decade-of-refinement-glow-up': {
|
||||
title: 'Une décennie de raffinement : glow-up',
|
||||
summary:
|
||||
'Prompt de transformation pour Seedance 2.0 montrant la transition d’un homme depuis un décor casual de 2016 vers un lifestyle luxueux à Dubaï en 2026.',
|
||||
},
|
||||
'ancient-guardian-dragon-rescue': {
|
||||
title: 'Sauvetage par un ancien dragon gardien',
|
||||
summary:
|
||||
'Prompt cinématique multi-shot détaillé sur une fille dans un village pluvieux sauvée par un dragon émergent.',
|
||||
},
|
||||
'ancient-indian-kingdom-fpv-video': {
|
||||
title: 'Vidéo FPV d’un ancien royaume indien',
|
||||
summary:
|
||||
'Prompt FPV drone rapide et cinématique montrant un royaume indien mystique avec temples et jungles.',
|
||||
},
|
||||
'animation-transfer-and-camera-tracking-prompt': {
|
||||
title: 'Prompt de transfert d’animation et de camera tracking',
|
||||
summary:
|
||||
'Prompt technique pour Seedance 2.0 appliquant une référence de mouvement précise à un personnage tout en conservant un camera tracking fixe.',
|
||||
},
|
||||
'beat-synced-outfit-transformation-dance': {
|
||||
title: 'Danse de transformation d’outfit synchronisée au beat',
|
||||
summary:
|
||||
'Prompt Seedance 2.0 qui fait danser un personnage depuis des breakdown frames et déclenche un changement d’outfit synchronisé au beat.',
|
||||
},
|
||||
'character-intro-motion-graphics-sequence': {
|
||||
title: 'Séquence motion graphics d’introduction de personnage',
|
||||
summary:
|
||||
'Prompt motion graphics complexe en plusieurs étapes pour présenter une équipe de personnages avec overlays UI et transitions.',
|
||||
},
|
||||
'cinematic-birthday-celebration-sequence': {
|
||||
title: 'Séquence cinématique de fête d’anniversaire',
|
||||
summary:
|
||||
'Prompt vidéo multi-shot très détaillé pour une séquence d’anniversaire, avec focus sur cohérence des personnages et storytelling émotionnel.',
|
||||
},
|
||||
'cinematic-dragon-interaction-flight': {
|
||||
title: 'Interaction cinématique avec dragon et envol',
|
||||
summary:
|
||||
'Prompt storyboard détaillé pour une vidéo avec interaction émotionnelle entre une femme et un dragon, suivie d’un vol cinématique.',
|
||||
},
|
||||
'cinematic-east-asian-woman-hand-dance': {
|
||||
title: 'Danse de mains cinématique d’une femme est-asiatique',
|
||||
summary:
|
||||
'Prompt vidéo cinématique multi-shot très détaillé pour une danse de mains stylisée avec instructions caméra et action time-coded.',
|
||||
},
|
||||
'cinematic-emotional-face-close-up': {
|
||||
title: 'Close-up facial émotionnel cinématique',
|
||||
summary:
|
||||
'Prompt technique Seedance 2.0 très détaillé centré sur textures de peau réalistes et transitions émotionnelles complexes du visage.',
|
||||
},
|
||||
'cinematic-marine-biologist-exploration': {
|
||||
title: 'Exploration cinématique d’une biologiste marine',
|
||||
summary:
|
||||
'Prompt vidéo cinématique détaillé pour une scène sous-marine où une biologiste marine découvre une épave ancienne dans un récif corallien.',
|
||||
},
|
||||
'cinematic-music-podcast-and-guitar-technique': {
|
||||
title: 'Podcast musical cinématique et technique guitare',
|
||||
summary:
|
||||
'Prompt cinématique avancé pour une vidéo podcast musical 4K, centrée sur technique guitare, pinch harmonics et esthétique studio.',
|
||||
},
|
||||
'cinematic-route-navigation-guide': {
|
||||
title: 'Guide de navigation d’itinéraire cinématique',
|
||||
summary:
|
||||
'Prompt multi-scène structuré pour Seedance afin de créer une vidéo de navigation à pied cohérente avec guide récurrent.',
|
||||
},
|
||||
'cinematic-street-racing-sequence-for-seedance-2': {
|
||||
title: 'Séquence street racing cinématique pour Seedance 2',
|
||||
summary:
|
||||
'Prompt multi-shot détaillé pour une séquence de street racing nocturne avec focus intense sur le pilote, caméra dynamique et accélération explosive.',
|
||||
},
|
||||
'cinematic-vampire-alley-fight-sequence': {
|
||||
title: 'Séquence de combat vampire dans une ruelle',
|
||||
summary:
|
||||
'Prompt d’action complet pour une scène de court-métrage avec caméra dynamique et combat à grande vitesse dans une ruelle éclairée au néon.',
|
||||
},
|
||||
'crimson-horizon-sci-fi-cinematic-sequence': {
|
||||
title: 'Séquence cinématique sci-fi Crimson Horizon',
|
||||
summary:
|
||||
'Séquence filmique complète en 9 shots pour un film sci-fi nommé “Crimson Horizon”, du lancement de fusée à la rencontre alien inquiétante sur Mars.',
|
||||
},
|
||||
'cyberpunk-game-trailer-script': {
|
||||
title: 'Script de trailer de jeu cyberpunk',
|
||||
summary:
|
||||
'Prompt vidéo détaillé pour trailer de jeu cyberpunk avec character design, animations UI et transitions d’environnement du void blanc à la favela.',
|
||||
},
|
||||
'forbidden-city-cat-satire': {
|
||||
title: 'Satire avec chat dans la Cité interdite',
|
||||
summary:
|
||||
'Prompt dark comedy complexe pour Seedance 2.0 avec chat fonctionnaire orange et empereur hyène dans une scène satirique de dynastie Qing.',
|
||||
},
|
||||
'game-screenshot-anime-fighting-game-captain-ryuuga-vs-kaze-renshin': {},
|
||||
'game-screenshot-three-kingdoms-guanyu-slaying-yanliang': {},
|
||||
'game-screenshot-three-kingdoms-lyubu-yuanmen-archery': {},
|
||||
'game-screenshot-three-kingdoms-zhaoyun-cradle-escape': {},
|
||||
'hollywood-haute-couture-fantasy-video-prompt': {
|
||||
title: 'Prompt vidéo fantasy haute couture hollywoodienne',
|
||||
summary:
|
||||
'Prompt vidéo multi-scène détaillé pour Seedance 2.0, conçu pour un film fantasy haute couture hollywoodien en esthétique 8K / Unreal Engine.',
|
||||
},
|
||||
'hyperframes-app-showcase-three-phones': {
|
||||
title: 'HyperFrames : app showcase 12 secondes avec trois phones flottants',
|
||||
summary:
|
||||
'Composition app showcase 16:9 de 12 secondes — trois écrans iPhone flottent dans l’espace 3D, chacun tourne pour révéler une feature, avec label callouts beat-sync et end logo lockup. Bâti directement sur le bloc de catalogue HyperFrames `app-showcase`.',
|
||||
},
|
||||
'hyperframes-brand-sizzle-reel': {
|
||||
title: 'HyperFrames : brand sizzle reel de 30 secondes',
|
||||
summary:
|
||||
'Sizzle reel HyperFrames 16:9 de 30 secondes — coupes rapides, typographie cinétique beat-sync, scale audio-réactif sur les mots display, transitions shader entre cinq scènes, end-card avec logo bloom. Modélisé sur l’archétype aisoc-hype du student kit.',
|
||||
},
|
||||
'hyperframes-data-bar-chart-race': {
|
||||
title: 'HyperFrames : bar chart race animé style NYT',
|
||||
summary:
|
||||
'Infographie data 16:9 de 12 secondes — bar chart et line chart animés avec reveal de catégories en stagger, headline serif façon NYT, footnote source, labels de valeur cinétiques. Bâti sur le bloc HyperFrames `data-chart`.',
|
||||
},
|
||||
'hyperframes-flight-map-route': {
|
||||
title: 'HyperFrames : carte de vol style Apple (origin → destination)',
|
||||
summary:
|
||||
'Carte de route aérienne cinématique 16:9 de 8 secondes — zoom terrain réaliste, avion animé sur route courbe, villes labellisées, compteur de distance cinétique. Bâti sur le bloc HyperFrames `nyc-paris-flight`, réutilisable pour toute paire de villes.',
|
||||
},
|
||||
'hyperframes-logo-outro-cinematic': {
|
||||
title: 'HyperFrames : logo outro cinématique de 4 secondes',
|
||||
summary:
|
||||
'Logo outro 16:9 de 4 secondes — construction progressive du wordmark avec bloom, shimmer sweep sur le lockup final, grain overlay doux, CTA en une ligne. Bâti sur les blocs HyperFrames `logo-outro`, `shimmer-sweep` et `grain-overlay`.',
|
||||
},
|
||||
'hyperframes-money-counter-hype': {
|
||||
title: 'HyperFrames : money counter hype $0 → $10K (9:16)',
|
||||
summary:
|
||||
'Clip hype vertical HyperFrames 1080×1920 de 6 secondes — compteur style Apple de $0 à $10,000 avec flash vert, particules money-burst, icône cash stack et kicker headline. Bâti sur le bloc HyperFrames `apple-money-count`.',
|
||||
},
|
||||
'hyperframes-product-reveal-minimal': {
|
||||
title: 'HyperFrames : product reveal minimal de 5 secondes',
|
||||
summary:
|
||||
'Composition HyperFrames de 5 secondes pour product reveal haut de gamme — canvas dark, accent chaud unique, push-in title-card lent, ligne kicker cinétique, mouvement retenu. L’agent rend le MP4 depuis HTML+GSAP via Puppeteer ; pas besoin de stock footage.',
|
||||
},
|
||||
'hyperframes-saas-product-promo-30s': {
|
||||
title: 'HyperFrames : promo produit SaaS 30 secondes style Linear',
|
||||
summary:
|
||||
'Composition HyperFrames de 30 secondes inspirée des films produit Linear/ClickUp — reveals UI 3D, typographie cinétique beat-sync, screenshots UI animés, end-card avec logo outro. Construite avec blocs HF Catalog et transitions shader.',
|
||||
},
|
||||
'hyperframes-social-overlay-stack': {
|
||||
title: 'HyperFrames : stack d’overlays sociaux 9:16 (X · Reddit · Spotify · Instagram)',
|
||||
summary:
|
||||
'Composition HyperFrames verticale 1080×1920 de 15 secondes empilant quatre cartes sociales animées sur un loop face-cam — post X, réaction Reddit, carte Spotify Now Playing, puis CTA Instagram follow.',
|
||||
},
|
||||
'hyperframes-tiktok-karaoke-talking-head': {
|
||||
title: 'HyperFrames : talking head TikTok 9:16 avec sous-titres karaoke',
|
||||
summary:
|
||||
'Short vertical HyperFrames 1080×1920 — talking head narré en TTS sur loop face-cam, sous-titres mot-à-mot façon karaoke, lower third animé et overlay follow TikTok en fin.',
|
||||
},
|
||||
'hyperframes-website-to-video-promo': {
|
||||
title: 'HyperFrames : pipeline website-to-video (marketing cut 15 secondes)',
|
||||
summary:
|
||||
'Composition HyperFrames 16:9 de 15 secondes qui capture un site live en trois tailles de viewport puis anime les scènes avec radial split chromatique.',
|
||||
},
|
||||
'hunched-character-animation': {
|
||||
title: 'Animation d’un personnage voûté',
|
||||
summary:
|
||||
'Instruction pour Seedance 2 afin de créer une animation de marche sur place à partir d’une référence de personnage précise.',
|
||||
},
|
||||
'live-action-anime-adaptation-water-vs-thunder-breathing-duel': {
|
||||
title: 'Adaptation live-action anime : duel souffle eau vs tonnerre',
|
||||
summary:
|
||||
'Prompt 15 secondes très détaillé pour adaptation live-action d’un duel anime avec effets d’eau bleue et d’éclairs dorés.',
|
||||
},
|
||||
'luxury-supercar-cinematic-narrative': {
|
||||
title: 'Narration cinématique de supercar de luxe',
|
||||
summary:
|
||||
'Prompt cinématique multi-shot très détaillé pour Seedance 2.0 avec homme stylé, dobermans et supercar vintage dans une scène de montagne brumeuse.',
|
||||
},
|
||||
'magical-academy-storyboard-sequence': {
|
||||
title: 'Séquence storyboard d’une académie magique',
|
||||
summary:
|
||||
'Prompt storyboard détaillé pour une séquence cinématique autour d’une magical girl dans une académie, de l’arrivée au duel magique.',
|
||||
},
|
||||
'modern-rural-aesthetics-healing-short-film-video-prompt': {
|
||||
title: 'Court-métrage healing en esthétique rural moderne',
|
||||
summary:
|
||||
'Prompt three-shot détaillé pour Seedance 2.0 produisant un court-métrage healing cinématique dans une esthétique rural moderne.',
|
||||
},
|
||||
'nightclub-flyer-atmospheric-animation': {
|
||||
title: 'Animation atmosphérique de flyer nightclub',
|
||||
summary:
|
||||
'Prompt d’animation subtil Seedance 2.0 qui donne vie aux éléments de fond et de lumière tout en gardant le sujet principal fixe.',
|
||||
},
|
||||
'retro-hk-wuxia-film-aesthetic': {
|
||||
title: 'Esthétique film wuxia HK rétro',
|
||||
summary:
|
||||
'Prompt vidéo complexe en plusieurs parties recréant l’esthétique wuxia hongkongaise des années 80/90 avec transformation de chat en humain.',
|
||||
},
|
||||
'seedance-2-0-15-second-cinematic-japanese-romance-short-film': {
|
||||
title: 'Seedance 2.0 : court-métrage romance japonaise cinématique de 15 secondes',
|
||||
summary:
|
||||
'Prompt multi-scène 15 secondes très détaillé pour court-métrage romance high school japonais cinématique et ultraréaliste.',
|
||||
},
|
||||
'seedance-2-0-80-year-old-rapper-mv': {
|
||||
title: 'Seedance 2.0 : rappeuse de 80 ans en clip',
|
||||
summary:
|
||||
'Prompt 15 secondes détaillé pour un clip street rap horizontal 16:9 avec une femme de 80 ans et des tons néon violet/bleu froid.',
|
||||
},
|
||||
'sequence-and-movement-instruction-for-martial-arts-video': {
|
||||
title: 'Instruction de séquence et mouvement pour vidéo d’arts martiaux',
|
||||
summary:
|
||||
'Prompt vidéo pour Seedance 2.0 animant une séquence à partir d’un character sheet et mettant l’accent sur mouvements et étapes spécifiques.',
|
||||
},
|
||||
'soul-switching-mirror-magic-sequence': {
|
||||
title: 'Séquence de magie miroir avec échange d’âmes',
|
||||
summary:
|
||||
'Prompt vidéo narratif sur un événement magique d’échange d’âmes devant un miroir, avec instructions caméra et cues émotionnels.',
|
||||
},
|
||||
'toaster-rocket-jumpscare': {
|
||||
title: 'Jumpscare de grille-pain fusée',
|
||||
summary:
|
||||
'Prompt pour une vidéo home-video réaliste d’un vieil homme surpris lorsqu’un grille-pain lance du pain comme une fusée.',
|
||||
},
|
||||
'traditional-dance-performance': {
|
||||
title: 'Performance de danse traditionnelle',
|
||||
summary:
|
||||
'Prompt Seedance 2.0 complet pour une danse traditionnelle gracieuse basée sur des images de référence de chorégraphie et d’identité.',
|
||||
},
|
||||
'video-seedance-three-kingdoms-guanyu-slaying-yanliang': {},
|
||||
'video-seedance-three-kingdoms-lyubu-yuanmen-archery': {},
|
||||
'video-seedance-three-kingdoms-zhaoyun-cradle-escape': {},
|
||||
'vintage-disney-style-pirate-crocodile-animation': {
|
||||
title: 'Animation crocodile pirate style Disney vintage',
|
||||
summary:
|
||||
'Prompt narratif multi-scène pour animation classique vintage Disney avec crocodile pirate et oiseaux pirates sur un navire.',
|
||||
},
|
||||
'viral-k-pop-dance-choreography': {
|
||||
title: 'Chorégraphie K-pop virale',
|
||||
summary:
|
||||
'Prompt Seedance 2.0 détaillé faisant danser un personnage selon une chorégraphie basée sur un storyboard de référence en 16 panels.',
|
||||
},
|
||||
'wasteland-factory-chase': {
|
||||
title: 'Poursuite dans une usine wasteland',
|
||||
summary:
|
||||
'Prompt cinématique pour scène wasteland désertique à haute vitesse avec usine industrielle marchant sur jambes et poursuite en rebel bike.',
|
||||
},
|
||||
'game-ui-ancient-china-open-world-mmo-hud': {
|
||||
title: 'Game UI - HUD MMO open-world Chine ancienne',
|
||||
summary:
|
||||
'Génère un mockup screenshot HUD in-game pour AAA open-world MMO en Chine ancienne, style photoréaliste cinématique Black Myth: Wukong, centré sur une épéiste dans une scène de montagne brumeuse avec HUD MMO complet.',
|
||||
},
|
||||
'illustration-crayon-kid-drawing-rework': {
|
||||
title: 'Illustration - Rework dessin enfant au crayon',
|
||||
summary:
|
||||
'Prompt de style transfer qui transforme toute image de référence en illustration au crayon dessinée à la main comme par un enfant de 10 ans, avec palette lumineuse et décor enfantin.',
|
||||
},
|
||||
'social-media-post-sensational-girl-dance-storyboard-8-shots': {
|
||||
title: 'Post réseaux sociaux - Storyboard danse d’une stylish girl (8 shots)',
|
||||
summary:
|
||||
'Set complet de prompts storyboard en 8 shots pour générer une séquence de danse cohérente, avec style tokens globaux, negative prompt réutilisable et huit plans individuels.',
|
||||
},
|
||||
};
|
||||
|
|
@ -4,6 +4,17 @@ import type {
|
|||
SkillSummary,
|
||||
} from '../types';
|
||||
import type { Locale } from './types';
|
||||
import {
|
||||
FR_DESIGN_SYSTEM_CATEGORIES,
|
||||
FR_DESIGN_SYSTEM_IDS_WITH_EN_FALLBACK,
|
||||
FR_DESIGN_SYSTEM_SUMMARIES,
|
||||
FR_PROMPT_TEMPLATE_CATEGORIES,
|
||||
FR_PROMPT_TEMPLATE_COPY,
|
||||
FR_PROMPT_TEMPLATE_IDS_WITH_EN_FALLBACK,
|
||||
FR_PROMPT_TEMPLATE_TAGS,
|
||||
FR_SKILL_COPY,
|
||||
FR_SKILL_IDS_WITH_EN_FALLBACK,
|
||||
} from './content.fr';
|
||||
import {
|
||||
RU_DESIGN_SYSTEM_CATEGORIES,
|
||||
RU_DESIGN_SYSTEM_IDS_WITH_EN_FALLBACK,
|
||||
|
|
@ -998,6 +1009,17 @@ const LOCALIZED_CONTENT: Partial<Record<Locale, LocalizedContentBundle>> = {
|
|||
promptTemplateTags: RU_PROMPT_TEMPLATE_TAGS,
|
||||
promptTemplateCopy: RU_PROMPT_TEMPLATE_COPY,
|
||||
},
|
||||
fr: {
|
||||
skillCopy: FR_SKILL_COPY,
|
||||
skillIdsWithEnFallback: FR_SKILL_IDS_WITH_EN_FALLBACK,
|
||||
designSystemSummaries: FR_DESIGN_SYSTEM_SUMMARIES,
|
||||
designSystemCategories: FR_DESIGN_SYSTEM_CATEGORIES,
|
||||
designSystemIdsWithEnFallback: FR_DESIGN_SYSTEM_IDS_WITH_EN_FALLBACK,
|
||||
promptTemplateCategories: FR_PROMPT_TEMPLATE_CATEGORIES,
|
||||
promptTemplateIdsWithEnFallback: FR_PROMPT_TEMPLATE_IDS_WITH_EN_FALLBACK,
|
||||
promptTemplateTags: FR_PROMPT_TEMPLATE_TAGS,
|
||||
promptTemplateCopy: FR_PROMPT_TEMPLATE_COPY,
|
||||
},
|
||||
};
|
||||
|
||||
function buildLocalizedContentIds(content: LocalizedContentBundle): LocalizedContentIds {
|
||||
|
|
@ -1023,10 +1045,12 @@ function buildLocalizedContentIds(content: LocalizedContentBundle): LocalizedCon
|
|||
export const LOCALIZED_CONTENT_IDS = {
|
||||
de: buildLocalizedContentIds(LOCALIZED_CONTENT.de!),
|
||||
ru: buildLocalizedContentIds(LOCALIZED_CONTENT.ru!),
|
||||
} satisfies Record<'de' | 'ru', LocalizedContentIds>;
|
||||
fr: buildLocalizedContentIds(LOCALIZED_CONTENT.fr!),
|
||||
} satisfies Record<'de' | 'ru' | 'fr', LocalizedContentIds>;
|
||||
|
||||
export const GERMAN_CONTENT_IDS = LOCALIZED_CONTENT_IDS.de;
|
||||
export const RUSSIAN_CONTENT_IDS = LOCALIZED_CONTENT_IDS.ru;
|
||||
export const FRENCH_CONTENT_IDS = LOCALIZED_CONTENT_IDS.fr;
|
||||
|
||||
function getLocalizedContent(locale: Locale): LocalizedContentBundle | undefined {
|
||||
return LOCALIZED_CONTENT[locale];
|
||||
|
|
|
|||
Loading…
Reference in a new issue