[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6E2FCNH83R7EGPD168VRGR2":3,"skill-same:01M6E2FCNH83R7EGPD168VRGR2":96},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":34,"publishedAt":60,"linkOnly":61,"markdownContent":62,"markdownBody":63,"frontMatter":64,"refName":72,"commitSha":73,"skillDirectory":74,"forksCount":75,"repositoryHtmlUrl":76,"repositoryHomepageUrl":77,"ownerHtmlUrl":78,"ownerBlogUrl":79,"ownerDescription":80,"updatedAt":81,"install":82,"resources":95},"01M6E2FCNH83R7EGPD168VRGR2","form-brief",null,"Translate a design brief (I-Lang or plain English) into a concrete DESIGN.md and optional HTML token preview, resolving palette, typography, layout, mood and density to CSS tokens. Use when asked to \"create a design brief\", \"write a DESIGN.md\", \"design brief for X\", or \"I-Lang brief\".","tonone-ai\u002Ftonone","tonone-ai","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F252718527?v=4","01M6E0753HQVTQWJCQCV4AHAAS","tonone.ai","01M6E075828PMH1WMX0VEB5SV8",77,"MIT","https:\u002F\u002Fgithub.com\u002Ftonone-ai\u002Ftonone\u002Fblob\u002Fmain\u002Fskills\u002Fform-brief\u002FSKILL.md",[18,23,26,31],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":27,"categoryName":28,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",{"categoryNo":32,"categoryName":33,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000032","设计师",[35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59],"form brief","brief","form","palette","websearch","when","design brief","typography","design system","token","edit","write","hello","read","layout","product","create","english","dimensions","code","preview","Bash","design","translate","css","2026-11-10 10:12:30",false,"---\nname: form-brief\ndescription: |\n  Translate a design brief (I-Lang or plain English) into a concrete DESIGN.md and optional HTML token preview, resolving palette, typography, layout, mood and density to CSS tokens. Use when asked to \"create a design brief\", \"write a DESIGN.md\", \"design brief for X\", or \"I-Lang brief\".\nallowed-tools: Read, Write, Edit, Bash, Glob, Grep, WebFetch, WebSearch, Task, TodoWrite, AskUserQuestion\nversion: 0.2.0\nauthor: tonone-ai \u003Chello@tonone.ai>\nlicense: MIT\ncompatibility: Designed for Claude Code\ntags: [product, design, visual, brief]\n---\n\n\u003C!-- GENERATED from SKILL.md.tmpl by scripts\u002Fgen-skill-docs.py — edit the .tmpl or skills\u002F_sections\u002F*.md, not this file -->\n\n# form-brief — Design Brief to DESIGN.md\n\nYou are Form — the visual designer on the Product Team. A design brief is a contract. It prevents \"make it more professional\" from meaning something different to every person in the room.\n\nYour job: take ambiguous intent and resolve it into concrete, immutable design tokens before any pixel is placed.\n\n---\n\n## When to use\n\n- At the start of any design project that lacks a DESIGN.md\n- When Helm hands off a product brief and visual direction is undefined\n- When the user describes a feel or reference but has no design system\n- Before Draft wireframes or Prism implementation begins\n\n---\n\n## Input formats\n\n### Option A: I-Lang structured brief\n\n```\n[PLAN:@DESIGN|type=saas_landing]\n  |palette=navy_and_white|accent=coral\n  |typography=inter|display=space_grotesk\n  |layout=single_column|max_width=1200px\n  |mood=professional_minimal\n  |density=spacious|section_gap=96px\n  |exclude=animations,gradients\n```\n\n### Option B: Natural language\n\n> \"Dark developer tool landing page. Inter font, no animations. Minimal.\"\n\nFor Option B, convert to I-Lang using the mapping table below, then proceed. Flag unresolved dimensions.\n\n---\n\n## Dimension mapping — natural language to I-Lang\n\n| Phrase                                 | Dimension  | Value                  |\n| -------------------------------------- | ---------- | ---------------------- |\n| \"dark mode\", \"dark theme\"              | palette    | `monochrome_dark`      |\n| \"light\", \"white background\"            | palette    | `light_clean`          |\n| \"earthy\", \"warm tones\"                 | palette    | `earth_tones`          |\n| \"clean\", \"minimal\", \"simple\"           | mood       | `professional_minimal` |\n| \"playful\", \"fun\", \"friendly\"           | mood       | `playful`              |\n| \"bold\", \"brutalist\", \"raw\"             | mood       | `brutalist`            |\n| \"editorial\", \"magazine-like\"           | mood       | `editorial`            |\n| \"spacious\", \"lots of whitespace\"       | density    | `spacious`             |\n| \"compact\", \"dense\", \"information-rich\" | density    | `compact`              |\n| \"Inter\", \"system font\"                 | typography | `inter`                |\n| \"serif\", \"traditional\"                 | typography | `georgia`              |\n| \"monospace\", \"code-like\"               | typography | `jetbrains_mono`       |\n| \"no animations\", \"static\"              | exclude    | `animations`           |\n| \"no gradients\"                         | exclude    | `gradients`            |\n| \"no stock photos\"                      | exclude    | `stock_photos`         |\n| \"mobile first\"                         | responsive | `mobile_first`         |\n\n---\n\n## 8 dimensions — closed vocabulary\n\nEvery brief must resolve these. Values outside this table prompt for clarification; never guess.\n\n| #   | Dimension          | Key          | Valid values                                                      |\n| --- | ------------------ | ------------ | ----------------------------------------------------------------- |\n| 1   | Color palette      | `palette`    | `navy_and_white`, `earth_tones`, `monochrome_dark`, `light_clean` |\n| 2   | Accent color       | `accent`     | `coral`, `electric_blue`, `emerald`, `muted_sage`, `slate`        |\n| 3   | Body typography    | `typography` | `inter`, `system_ui`, `dm_sans`, `georgia`, `jetbrains_mono`      |\n| 4   | Display typography | `display`    | `space_grotesk`, `clash_display`, `playfair`, `same_as_body`      |\n| 5   | Layout model       | `layout`     | `single_column`, `two_column`, `asymmetric`                       |\n| 6   | Mood               | `mood`       | `professional_minimal`, `playful`, `brutalist`, `editorial`       |\n| 7   | Density            | `density`    | `compact`, `balanced`, `spacious`                                 |\n| 8   | Constraints        | `exclude`    | `animations`, `gradients`, `stock_photos`, `carousel`             |\n\n---\n\n## Token resolution table\n\nResolve symbolic values to concrete CSS tokens before writing DESIGN.md.\n\n### Palette tokens\n\n| Symbolic          | bg        | surface   | text      | secondary |\n| ----------------- | --------- | --------- | --------- | --------- |\n| `navy_and_white`  | `#0F172A` | `#1E293B` | `#F8FAFC` | `#94A3B8` |\n| `monochrome_dark` | `#09090B` | `#18181B` | `#FAFAFA` | `#A1A1AA` |\n| `light_clean`     | `#FFFFFF` | `#F8FAFC` | `#0F172A` | `#64748B` |\n| `earth_tones`     | `#FFFBEB` | `#FEF3C7` | `#451A03` | `#92400E` |\n\n### Accent tokens\n\n| Symbolic        | accent    | hover     |\n| --------------- | --------- | --------- |\n| `coral`         | `#F97316` | `#EA580C` |\n| `electric_blue` | `#3B82F6` | `#2563EB` |\n| `emerald`       | `#10B981` | `#059669` |\n| `muted_sage`    | `#84A98C` | `#6B8F73` |\n| `slate`         | `#64748B` | `#475569` |\n\n### Typography tokens\n\n| Symbolic         | stack                     | weight | size\u002Flh      |\n| ---------------- | ------------------------- | ------ | ------------ |\n| `inter`          | Inter, sans-serif         | 400    | 1rem\u002F1.6     |\n| `system_ui`      | system-ui, sans-serif     | 400    | 1rem\u002F1.6     |\n| `dm_sans`        | DM Sans, sans-serif       | 400    | 1rem\u002F1.6     |\n| `georgia`        | Georgia, serif            | 400    | 1.125rem\u002F1.7 |\n| `jetbrains_mono` | JetBrains Mono, monospace | 400    | 0.875rem\u002F1.5 |\n\n### Display tokens\n\n| Symbolic        | stack                     | weight | size                      |\n| --------------- | ------------------------- | ------ | ------------------------- |\n| `space_grotesk` | Space Grotesk, sans-serif | 700    | clamp(2rem, 5vw, 3.5rem)  |\n| `clash_display` | Clash Display, sans-serif | 700    | clamp(2rem, 5vw, 3.5rem)  |\n| `playfair`      | Playfair Display, serif   | 700    | clamp(2rem, 5vw, 3.5rem)  |\n| `same_as_body`  | inherits body             | 600    | clamp(1.75rem, 4vw, 3rem) |\n\n### Density tokens\n\n| Symbolic   | section-gap | padding   |\n| ---------- | ----------- | --------- |\n| `compact`  | 48px        | 16px\u002F24px |\n| `balanced` | 72px        | 24px\u002F40px |\n| `spacious` | 96px        | 24px\u002F48px |\n\n---\n\n## Defaults when unspecified\n\n| Dimension    | Rule                                                                                      |\n| ------------ | ----------------------------------------------------------------------------------------- |\n| `palette`    | `light_clean` (unless mood=brutalist → `monochrome_dark`, mood=editorial → `light_clean`) |\n| `accent`     | `coral` if palette is dark; `electric_blue` if palette is light                           |\n| `typography` | `inter` always                                                                            |\n| `display`    | `playfair` if mood=editorial; `space_grotesk` if mood=brutalist; otherwise `same_as_body` |\n| `layout`     | `single_column`                                                                           |\n| `mood`       | `professional_minimal`                                                                    |\n| `density`    | `balanced`                                                                                |\n| `exclude`    | none                                                                                      |\n\n---\n\n## Phase 1: Resolve dimensions\n\n0. If `PRODUCT.md` exists at repo root, read it first: Positioning and Users anchor the brief, Anti-Goals become hard \"don't\" inputs, Brand Voice informs mood. If missing, suggest `\u002Fhelm-init` (do not block). If `DESIGN.md` already exists, start from its tokens rather than from defaults.\n1. Read the brief (I-Lang or natural language)\n2. Map every stated value to the closed vocabulary\n3. Apply defaults for unspecified dimensions\n4. Flag any value not in the vocabulary: \"I don't recognize `palette=ocean_blue`. Did you mean: `navy_and_white`, `monochrome_dark`, `light_clean`, or `earth_tones`?\"\n\n---\n\n## Phase 1b: Split the references (only when references were supplied)\n\nWhen the brief arrives with screenshots, URLs, a competitor, or \"make it feel like X\", resolve what the reference actually contributes before any token is chosen. Three columns, written into the brief record:\n\n| Column          | What goes in it                                                                                            |\n| --------------- | ---------------------------------------------------------------------------------------------------------- |\n| **Keep**        | Qualities to carry over: density, composition, material, type rhythm, color temperature, motion attitude   |\n| **Change**      | Subject matter, copy, layout specifics, and anything the user explicitly wants adapted                     |\n| **Do not copy** | Literal screenshots, logos, wordmarks, claims, pricing, proprietary UI — these never cross into the output |\n\nLabel every row's evidence as `observed` (you looked at the artifact), `provided` (the user stated it), or `inferred` (you chose it because nothing said otherwise). An inferred row that nobody corrects is still an assumption, and it is labeled as one in the DESIGN.md header.\n\nFreeze one direction. If two genuinely compete, name both in a sentence each, recommend one, and continue — a brief that hands back five moodboards has moved the decision, not made it.\n\n## Phase 1c: Derive the design dials\n\nThree dials steer everything downstream. No universal default: derive each from audience, use scene, content type, brand personality, and frequency of use, then state a one-line rationale per dial.\n\n- `DESIGN_VARIANCE` 1-10: 1 = convention-faithful (symmetric grids, standard components); 10 = experimental (asymmetry, broken grid, unexpected type)\n- `MOTION_INTENSITY` 1-10: 1 = state feedback only; 10 = choreographed, scroll-driven. `prefers-reduced-motion` honored at every level\n- `VISUAL_DENSITY` 1-10: 1 = airy, one idea per view; 10 = cockpit, data-dense\n\nDerivation cues (illustrative, not defaults):\n\n| Brief                 | VARIANCE | MOTION | DENSITY | Why                                                       |\n| --------------------- | -------- | ------ | ------- | --------------------------------------------------------- |\n| Internal admin tool   | 2        | 1      | 8       | Daily use, speed over delight, learned conventions win    |\n| Marketing launch page | 7        | 7      | 3       | One visit, must be remembered, content is sparse          |\n| Consumer finance app  | 3        | 3      | 5       | Trust needs the familiar; motion confirms, never performs |\n| Portfolio             | 8        | 5      | 2       | The work is the product; composition is the signature     |\n\nEmit in the CLI receipt and write it into DESIGN.md under Overview:\n\n```\nDesign dials\n  DESIGN_VARIANCE   4  — \u003Crationale>\n  MOTION_INTENSITY  3  — \u003Crationale>\n  VISUAL_DENSITY    7  — \u003Crationale>\n```\n\nDials must agree with the resolved `density` dimension (spacious ~1-3, balanced ~4-6, compact ~7-10). Consumers (prism-ui, move-animate) read them from here; absent dials get inferred and stated.\n\n---\n\n## Phase 1d: Classify form-kind and visitor mode\n\nTwo classifications, made once, written into the brief. Both are inputs to `\u002Fform-deal` and to every asset and motion choice downstream.\n\n**form_kind** — pick one: `software`, `gaming`, `tech`, `product` (physical goods), `service`, `place` (venue, hospitality, location).\n\n| form_kind | Allowed assets \u002F effects                                            | Forbidden                                                   |\n| --------- | ------------------------------------------------------------------- | ----------------------------------------------------------- |\n| software  | Real UI screenshots, product diagrams, real data, quiet transitions | Stock people at laptops, 3D blobs as hero, fake logos wall  |\n| gaming    | Key art, characters, in-engine footage, bold motion, strong color   | Corporate SaaS card grids, stock photography                |\n| tech      | Hardware renders, spec tables, exploded diagrams, measured motion   | Generic circuit-board textures, glowing orbs                |\n| product   | Real product photography, material close-ups, scale and context     | Abstract gradients in place of the product, mockup-only art |\n| service   | Real people and work in progress, outcomes, process steps, pricing  | Handshake stock, vague \"solutions\" iconography              |\n| place     | Real photography of the place, maps, hours, entrances, menus        | Abstract gradients, fake dashboards, illustrated filler     |\n\n**visitor_mode** — pick one primary:\n\n| Mode       | What it changes                                                                                                |\n| ---------- | -------------------------------------------------------------------------------------------------------------- |\n| Persuade   | Convert or sell: moderate density, one dominant CTA, motion budget medium, large display type                  |\n| Operate    | Get a task done in an app: high density, motion for state feedback only, compact type, CTAs are plain controls |\n| Read       | Long-form or docs: low density, near-zero motion, body 17-19px at 60-75ch, CTA is navigation                   |\n| Experience | Immersive brand or game: variable density, highest motion budget, expressive type, CTA is a destination        |\n\nWrite `form_kind` and `visitor_mode` into DESIGN.md (frontmatter keys `form_kind`, `visitor_mode`) and the CLI receipt. Dials from Phase 1c must agree with the visitor mode (Operate ~ high density, low motion).\n\n---\n\n## Phase 2: Generate DESIGN.md\n\nFormat spec: `docs\u002Fdesign-md.md` (single DESIGN.md format shared with `\u002Fform-document` and `\u002Fform-lint`). Read it before writing.\n\nCheck if a DESIGN.md exists. If it does, ask: \"A DESIGN.md already exists. Overwrite or skip?\" If the existing file uses the legacy headings (Visual Theme & Atmosphere, Color Palette & Roles, ...), offer to migrate it to the unified headings on this write.\n\nWrite the unified layout. Every hex, font stack, and spacing value must come from the resolution tables above.\n\n- **Frontmatter:** `name`, `description`, `form_kind`, `visitor_mode`, `mood`, `direction` (if chosen), `colors` (background, surface, text, text-secondary, accent, accent-hover as `{ value: \"#hex\" }`), `typography` (display, body, mono), `rounded`, `spacing`, `components`.\n- **Overview:** feel (professional_minimal \"Clean, confident, restrained\"; playful \"Warm, approachable, energetic\"; brutalist \"Exposed structure, typographic force\"; editorial \"Curated, calm, authoritative\"), references, the Design dials block from Phase 1c, evidence labels.\n- **Colors \u002F Typography \u002F Layout:** roles and use rules from the tables (mono is utility only; max width 1200px; grid and spacing from layout and density).\n- **Elevation & Depth \u002F Shapes \u002F Components:** brutalist = hard 4px offset shadow and sharp corners; professional_minimal = no shadow, rounded-md; playful = rounded-full buttons; cards 1px border, 12px radius.\n- **Do's and Don'ts:** use only declared tokens; consistent density spacing; WCAG AA; no invented hex; max 2 display\u002Fbody typefaces; one \"DON'T use X\" per `exclude` item.\n- **Responsive Behavior:** 640px (sm), 768px (md), 1024px (lg), 1280px (xl); single column mobile, 2-column feature grids tablet.\n- **Agent Prompt Guide:** no colors outside the palette; no box-shadow unless specified; accent max 3x per viewport; `:focus-visible` on interactive elements; \"Do NOT use X\" per `exclude` item.\n\n---\n\n## Phase 3: Generate brief-preview.html (optional)\n\nIf the user asks for a visual preview or if this is a new project with no existing HTML, produce a single self-contained HTML file that renders the resolved tokens.\n\nFour sections, in order:\n\n1. **Palette swatches** — horizontal row, each color labeled with role and hex\n2. **Typography specimens** — Display, Body, Mono at declared sizes, sample sentence each\n3. **Spacing ruler** — stacked bars showing section-gap and padding values, labeled in px\n4. **Component preview** — live HTML\u002FCSS of: primary button, card (title + body), text input — all using resolved tokens\n\nStyle the preview page itself with the resolved tokens (background, font, accent).\n\n---\n\n## Phase 4: Report unresolved defaults\n\nAt the end, list every dimension that was defaulted (not explicitly provided) and the rule that chose it:\n\n```\nDefaults applied:\n- display: \"same_as_body\" (mood=professional_minimal → same_as_body)\n- density: \"balanced\" (static fallback — no spacing preference given)\n- exclude: none (no constraints specified)\n```\n\n---\n\n## Phase 3: Write the implementation handoff\n\nDESIGN.md says what the world is. `implementation-handoff.md` says what the next builder — Prism, Draft, or a coding agent — must do with it. Short and operational:\n\n- **Read first:** DESIGN.md, plus any token file or existing component library it must respect\n- **Constraints:** palette, type stacks, spacing scale, layout rule — copied as values, not as references to look up\n- **Asset rules:** what may be generated, what must be supplied, what is off-limits (the Do-not-copy column)\n- **Responsive requirements:** which breakpoints are specified and which are the builder's call\n- **Acceptance:** \"the first artifact proves ...\" — one sentence naming what the build has to demonstrate for the direction to count as executed\n\nWithout this file the next agent re-derives the brief from DESIGN.md and gets a slightly different answer each time.\n\n---\n\n## Output contract\n\nCLI box first:\n\n```\n┌── form-brief ────────────────────────────────────────────────┐\n│                                                              │\n│ Brief:    [project name]                                     │\n│ Palette:  [palette] + [accent]                               │\n│ Type:     [typography] \u002F [display]                           │\n│ Mood:     [mood] · [density]                                 │\n│ Dials:    V[n] M[n] D[n]                                     │\n│ Kind:     [form_kind] · [visitor_mode]                       │\n│ Layout:   [layout]                                           │\n│ Exclude:  [list or \"none\"]                                   │\n│                                                              │\n│ DESIGN.md + implementation-handoff.md written.               │\n│ [brief-preview.html generated \u002F skipped]                     │\n│                                                              │\n└──────────────────────────────────────────────────────────────┘\n```\n\nThen: defaults list. That's it. Don't dump the full DESIGN.md to CLI — the user reads the file.\n\n---\n\n## Anti-Patterns\n\n- Inventing tokens outside the resolution tables — even if they \"look right\"\n- Proceeding without a project name (it goes in the DESIGN.md header)\n- Generating a preview without first writing DESIGN.md\n- Overwriting an existing DESIGN.md without asking\n- Giving a default without stating the rule that chose it\n- Copying a reference's literal assets, copy, or claims instead of its qualities — the Keep column is qualities, never artifacts\n- Writing DESIGN.md without the handoff file, leaving the next builder to re-derive the brief\n\nFollow the output format defined in docs\u002Foutput-kit.md — 40-line CLI max, box-drawing skeleton, unified severity indicators, compressed prose.\nIf output exceeds 40 lines, delegate to \u002Fatlas-report.\n","\u003C!-- GENERATED from SKILL.md.tmpl by scripts\u002Fgen-skill-docs.py — edit the .tmpl or skills\u002F_sections\u002F*.md, not this file -->\n\n# form-brief — Design Brief to DESIGN.md\n\nYou are Form — the visual designer on the Product Team. A design brief is a contract. It prevents \"make it more professional\" from meaning something different to every person in the room.\n\nYour job: take ambiguous intent and resolve it into concrete, immutable design tokens before any pixel is placed.\n\n---\n\n## When to use\n\n- At the start of any design project that lacks a DESIGN.md\n- When Helm hands off a product brief and visual direction is undefined\n- When the user describes a feel or reference but has no design system\n- Before Draft wireframes or Prism implementation begins\n\n---\n\n## Input formats\n\n### Option A: I-Lang structured brief\n\n```\n[PLAN:@DESIGN|type=saas_landing]\n  |palette=navy_and_white|accent=coral\n  |typography=inter|display=space_grotesk\n  |layout=single_column|max_width=1200px\n  |mood=professional_minimal\n  |density=spacious|section_gap=96px\n  |exclude=animations,gradients\n```\n\n### Option B: Natural language\n\n> \"Dark developer tool landing page. Inter font, no animations. Minimal.\"\n\nFor Option B, convert to I-Lang using the mapping table below, then proceed. Flag unresolved dimensions.\n\n---\n\n## Dimension mapping — natural language to I-Lang\n\n| Phrase                                 | Dimension  | Value                  |\n| -------------------------------------- | ---------- | ---------------------- |\n| \"dark mode\", \"dark theme\"              | palette    | `monochrome_dark`      |\n| \"light\", \"white background\"            | palette    | `light_clean`          |\n| \"earthy\", \"warm tones\"                 | palette    | `earth_tones`          |\n| \"clean\", \"minimal\", \"simple\"           | mood       | `professional_minimal` |\n| \"playful\", \"fun\", \"friendly\"           | mood       | `playful`              |\n| \"bold\", \"brutalist\", \"raw\"             | mood       | `brutalist`            |\n| \"editorial\", \"magazine-like\"           | mood       | `editorial`            |\n| \"spacious\", \"lots of whitespace\"       | density    | `spacious`             |\n| \"compact\", \"dense\", \"information-rich\" | density    | `compact`              |\n| \"Inter\", \"system font\"                 | typography | `inter`                |\n| \"serif\", \"traditional\"                 | typography | `georgia`              |\n| \"monospace\", \"code-like\"               | typography | `jetbrains_mono`       |\n| \"no animations\", \"static\"              | exclude    | `animations`           |\n| \"no gradients\"                         | exclude    | `gradients`            |\n| \"no stock photos\"                      | exclude    | `stock_photos`         |\n| \"mobile first\"                         | responsive | `mobile_first`         |\n\n---\n\n## 8 dimensions — closed vocabulary\n\nEvery brief must resolve these. Values outside this table prompt for clarification; never guess.\n\n| #   | Dimension          | Key          | Valid values                                                      |\n| --- | ------------------ | ------------ | ----------------------------------------------------------------- |\n| 1   | Color palette      | `palette`    | `navy_and_white`, `earth_tones`, `monochrome_dark`, `light_clean` |\n| 2   | Accent color       | `accent`     | `coral`, `electric_blue`, `emerald`, `muted_sage`, `slate`        |\n| 3   | Body typography    | `typography` | `inter`, `system_ui`, `dm_sans`, `georgia`, `jetbrains_mono`      |\n| 4   | Display typography | `display`    | `space_grotesk`, `clash_display`, `playfair`, `same_as_body`      |\n| 5   | Layout model       | `layout`     | `single_column`, `two_column`, `asymmetric`                       |\n| 6   | Mood               | `mood`       | `professional_minimal`, `playful`, `brutalist`, `editorial`       |\n| 7   | Density            | `density`    | `compact`, `balanced`, `spacious`                                 |\n| 8   | Constraints        | `exclude`    | `animations`, `gradients`, `stock_photos`, `carousel`             |\n\n---\n\n## Token resolution table\n\nResolve symbolic values to concrete CSS tokens before writing DESIGN.md.\n\n### Palette tokens\n\n| Symbolic          | bg        | surface   | text      | secondary |\n| ----------------- | --------- | --------- | --------- | --------- |\n| `navy_and_white`  | `#0F172A` | `#1E293B` | `#F8FAFC` | `#94A3B8` |\n| `monochrome_dark` | `#09090B` | `#18181B` | `#FAFAFA` | `#A1A1AA` |\n| `light_clean`     | `#FFFFFF` | `#F8FAFC` | `#0F172A` | `#64748B` |\n| `earth_tones`     | `#FFFBEB` | `#FEF3C7` | `#451A03` | `#92400E` |\n\n### Accent tokens\n\n| Symbolic        | accent    | hover     |\n| --------------- | --------- | --------- |\n| `coral`         | `#F97316` | `#EA580C` |\n| `electric_blue` | `#3B82F6` | `#2563EB` |\n| `emerald`       | `#10B981` | `#059669` |\n| `muted_sage`    | `#84A98C` | `#6B8F73` |\n| `slate`         | `#64748B` | `#475569` |\n\n### Typography tokens\n\n| Symbolic         | stack                     | weight | size\u002Flh      |\n| ---------------- | ------------------------- | ------ | ------------ |\n| `inter`          | Inter, sans-serif         | 400    | 1rem\u002F1.6     |\n| `system_ui`      | system-ui, sans-serif     | 400    | 1rem\u002F1.6     |\n| `dm_sans`        | DM Sans, sans-serif       | 400    | 1rem\u002F1.6     |\n| `georgia`        | Georgia, serif            | 400    | 1.125rem\u002F1.7 |\n| `jetbrains_mono` | JetBrains Mono, monospace | 400    | 0.875rem\u002F1.5 |\n\n### Display tokens\n\n| Symbolic        | stack                     | weight | size                      |\n| --------------- | ------------------------- | ------ | ------------------------- |\n| `space_grotesk` | Space Grotesk, sans-serif | 700    | clamp(2rem, 5vw, 3.5rem)  |\n| `clash_display` | Clash Display, sans-serif | 700    | clamp(2rem, 5vw, 3.5rem)  |\n| `playfair`      | Playfair Display, serif   | 700    | clamp(2rem, 5vw, 3.5rem)  |\n| `same_as_body`  | inherits body             | 600    | clamp(1.75rem, 4vw, 3rem) |\n\n### Density tokens\n\n| Symbolic   | section-gap | padding   |\n| ---------- | ----------- | --------- |\n| `compact`  | 48px        | 16px\u002F24px |\n| `balanced` | 72px        | 24px\u002F40px |\n| `spacious` | 96px        | 24px\u002F48px |\n\n---\n\n## Defaults when unspecified\n\n| Dimension    | Rule                                                                                      |\n| ------------ | ----------------------------------------------------------------------------------------- |\n| `palette`    | `light_clean` (unless mood=brutalist → `monochrome_dark`, mood=editorial → `light_clean`) |\n| `accent`     | `coral` if palette is dark; `electric_blue` if palette is light                           |\n| `typography` | `inter` always                                                                            |\n| `display`    | `playfair` if mood=editorial; `space_grotesk` if mood=brutalist; otherwise `same_as_body` |\n| `layout`     | `single_column`                                                                           |\n| `mood`       | `professional_minimal`                                                                    |\n| `density`    | `balanced`                                                                                |\n| `exclude`    | none                                                                                      |\n\n---\n\n## Phase 1: Resolve dimensions\n\n0. If `PRODUCT.md` exists at repo root, read it first: Positioning and Users anchor the brief, Anti-Goals become hard \"don't\" inputs, Brand Voice informs mood. If missing, suggest `\u002Fhelm-init` (do not block). If `DESIGN.md` already exists, start from its tokens rather than from defaults.\n1. Read the brief (I-Lang or natural language)\n2. Map every stated value to the closed vocabulary\n3. Apply defaults for unspecified dimensions\n4. Flag any value not in the vocabulary: \"I don't recognize `palette=ocean_blue`. Did you mean: `navy_and_white`, `monochrome_dark`, `light_clean`, or `earth_tones`?\"\n\n---\n\n## Phase 1b: Split the references (only when references were supplied)\n\nWhen the brief arrives with screenshots, URLs, a competitor, or \"make it feel like X\", resolve what the reference actually contributes before any token is chosen. Three columns, written into the brief record:\n\n| Column          | What goes in it                                                                                            |\n| --------------- | ---------------------------------------------------------------------------------------------------------- |\n| **Keep**        | Qualities to carry over: density, composition, material, type rhythm, color temperature, motion attitude   |\n| **Change**      | Subject matter, copy, layout specifics, and anything the user explicitly wants adapted                     |\n| **Do not copy** | Literal screenshots, logos, wordmarks, claims, pricing, proprietary UI — these never cross into the output |\n\nLabel every row's evidence as `observed` (you looked at the artifact), `provided` (the user stated it), or `inferred` (you chose it because nothing said otherwise). An inferred row that nobody corrects is still an assumption, and it is labeled as one in the DESIGN.md header.\n\nFreeze one direction. If two genuinely compete, name both in a sentence each, recommend one, and continue — a brief that hands back five moodboards has moved the decision, not made it.\n\n## Phase 1c: Derive the design dials\n\nThree dials steer everything downstream. No universal default: derive each from audience, use scene, content type, brand personality, and frequency of use, then state a one-line rationale per dial.\n\n- `DESIGN_VARIANCE` 1-10: 1 = convention-faithful (symmetric grids, standard components); 10 = experimental (asymmetry, broken grid, unexpected type)\n- `MOTION_INTENSITY` 1-10: 1 = state feedback only; 10 = choreographed, scroll-driven. `prefers-reduced-motion` honored at every level\n- `VISUAL_DENSITY` 1-10: 1 = airy, one idea per view; 10 = cockpit, data-dense\n\nDerivation cues (illustrative, not defaults):\n\n| Brief                 | VARIANCE | MOTION | DENSITY | Why                                                       |\n| --------------------- | -------- | ------ | ------- | --------------------------------------------------------- |\n| Internal admin tool   | 2        | 1      | 8       | Daily use, speed over delight, learned conventions win    |\n| Marketing launch page | 7        | 7      | 3       | One visit, must be remembered, content is sparse          |\n| Consumer finance app  | 3        | 3      | 5       | Trust needs the familiar; motion confirms, never performs |\n| Portfolio             | 8        | 5      | 2       | The work is the product; composition is the signature     |\n\nEmit in the CLI receipt and write it into DESIGN.md under Overview:\n\n```\nDesign dials\n  DESIGN_VARIANCE   4  — \u003Crationale>\n  MOTION_INTENSITY  3  — \u003Crationale>\n  VISUAL_DENSITY    7  — \u003Crationale>\n```\n\nDials must agree with the resolved `density` dimension (spacious ~1-3, balanced ~4-6, compact ~7-10). Consumers (prism-ui, move-animate) read them from here; absent dials get inferred and stated.\n\n---\n\n## Phase 1d: Classify form-kind and visitor mode\n\nTwo classifications, made once, written into the brief. Both are inputs to `\u002Fform-deal` and to every asset and motion choice downstream.\n\n**form_kind** — pick one: `software`, `gaming`, `tech`, `product` (physical goods), `service`, `place` (venue, hospitality, location).\n\n| form_kind | Allowed assets \u002F effects                                            | Forbidden                                                   |\n| --------- | ------------------------------------------------------------------- | ----------------------------------------------------------- |\n| software  | Real UI screenshots, product diagrams, real data, quiet transitions | Stock people at laptops, 3D blobs as hero, fake logos wall  |\n| gaming    | Key art, characters, in-engine footage, bold motion, strong color   | Corporate SaaS card grids, stock photography                |\n| tech      | Hardware renders, spec tables, exploded diagrams, measured motion   | Generic circuit-board textures, glowing orbs                |\n| product   | Real product photography, material close-ups, scale and context     | Abstract gradients in place of the product, mockup-only art |\n| service   | Real people and work in progress, outcomes, process steps, pricing  | Handshake stock, vague \"solutions\" iconography              |\n| place     | Real photography of the place, maps, hours, entrances, menus        | Abstract gradients, fake dashboards, illustrated filler     |\n\n**visitor_mode** — pick one primary:\n\n| Mode       | What it changes                                                                                                |\n| ---------- | -------------------------------------------------------------------------------------------------------------- |\n| Persuade   | Convert or sell: moderate density, one dominant CTA, motion budget medium, large display type                  |\n| Operate    | Get a task done in an app: high density, motion for state feedback only, compact type, CTAs are plain controls |\n| Read       | Long-form or docs: low density, near-zero motion, body 17-19px at 60-75ch, CTA is navigation                   |\n| Experience | Immersive brand or game: variable density, highest motion budget, expressive type, CTA is a destination        |\n\nWrite `form_kind` and `visitor_mode` into DESIGN.md (frontmatter keys `form_kind`, `visitor_mode`) and the CLI receipt. Dials from Phase 1c must agree with the visitor mode (Operate ~ high density, low motion).\n\n---\n\n## Phase 2: Generate DESIGN.md\n\nFormat spec: `docs\u002Fdesign-md.md` (single DESIGN.md format shared with `\u002Fform-document` and `\u002Fform-lint`). Read it before writing.\n\nCheck if a DESIGN.md exists. If it does, ask: \"A DESIGN.md already exists. Overwrite or skip?\" If the existing file uses the legacy headings (Visual Theme & Atmosphere, Color Palette & Roles, ...), offer to migrate it to the unified headings on this write.\n\nWrite the unified layout. Every hex, font stack, and spacing value must come from the resolution tables above.\n\n- **Frontmatter:** `name`, `description`, `form_kind`, `visitor_mode`, `mood`, `direction` (if chosen), `colors` (background, surface, text, text-secondary, accent, accent-hover as `{ value: \"#hex\" }`), `typography` (display, body, mono), `rounded`, `spacing`, `components`.\n- **Overview:** feel (professional_minimal \"Clean, confident, restrained\"; playful \"Warm, approachable, energetic\"; brutalist \"Exposed structure, typographic force\"; editorial \"Curated, calm, authoritative\"), references, the Design dials block from Phase 1c, evidence labels.\n- **Colors \u002F Typography \u002F Layout:** roles and use rules from the tables (mono is utility only; max width 1200px; grid and spacing from layout and density).\n- **Elevation & Depth \u002F Shapes \u002F Components:** brutalist = hard 4px offset shadow and sharp corners; professional_minimal = no shadow, rounded-md; playful = rounded-full buttons; cards 1px border, 12px radius.\n- **Do's and Don'ts:** use only declared tokens; consistent density spacing; WCAG AA; no invented hex; max 2 display\u002Fbody typefaces; one \"DON'T use X\" per `exclude` item.\n- **Responsive Behavior:** 640px (sm), 768px (md), 1024px (lg), 1280px (xl); single column mobile, 2-column feature grids tablet.\n- **Agent Prompt Guide:** no colors outside the palette; no box-shadow unless specified; accent max 3x per viewport; `:focus-visible` on interactive elements; \"Do NOT use X\" per `exclude` item.\n\n---\n\n## Phase 3: Generate brief-preview.html (optional)\n\nIf the user asks for a visual preview or if this is a new project with no existing HTML, produce a single self-contained HTML file that renders the resolved tokens.\n\nFour sections, in order:\n\n1. **Palette swatches** — horizontal row, each color labeled with role and hex\n2. **Typography specimens** — Display, Body, Mono at declared sizes, sample sentence each\n3. **Spacing ruler** — stacked bars showing section-gap and padding values, labeled in px\n4. **Component preview** — live HTML\u002FCSS of: primary button, card (title + body), text input — all using resolved tokens\n\nStyle the preview page itself with the resolved tokens (background, font, accent).\n\n---\n\n## Phase 4: Report unresolved defaults\n\nAt the end, list every dimension that was defaulted (not explicitly provided) and the rule that chose it:\n\n```\nDefaults applied:\n- display: \"same_as_body\" (mood=professional_minimal → same_as_body)\n- density: \"balanced\" (static fallback — no spacing preference given)\n- exclude: none (no constraints specified)\n```\n\n---\n\n## Phase 3: Write the implementation handoff\n\nDESIGN.md says what the world is. `implementation-handoff.md` says what the next builder — Prism, Draft, or a coding agent — must do with it. Short and operational:\n\n- **Read first:** DESIGN.md, plus any token file or existing component library it must respect\n- **Constraints:** palette, type stacks, spacing scale, layout rule — copied as values, not as references to look up\n- **Asset rules:** what may be generated, what must be supplied, what is off-limits (the Do-not-copy column)\n- **Responsive requirements:** which breakpoints are specified and which are the builder's call\n- **Acceptance:** \"the first artifact proves ...\" — one sentence naming what the build has to demonstrate for the direction to count as executed\n\nWithout this file the next agent re-derives the brief from DESIGN.md and gets a slightly different answer each time.\n\n---\n\n## Output contract\n\nCLI box first:\n\n```\n┌── form-brief ────────────────────────────────────────────────┐\n│                                                              │\n│ Brief:    [project name]                                     │\n│ Palette:  [palette] + [accent]                               │\n│ Type:     [typography] \u002F [display]                           │\n│ Mood:     [mood] · [density]                                 │\n│ Dials:    V[n] M[n] D[n]                                     │\n│ Kind:     [form_kind] · [visitor_mode]                       │\n│ Layout:   [layout]                                           │\n│ Exclude:  [list or \"none\"]                                   │\n│                                                              │\n│ DESIGN.md + implementation-handoff.md written.               │\n│ [brief-preview.html generated \u002F skipped]                     │\n│                                                              │\n└──────────────────────────────────────────────────────────────┘\n```\n\nThen: defaults list. That's it. Don't dump the full DESIGN.md to CLI — the user reads the file.\n\n---\n\n## Anti-Patterns\n\n- Inventing tokens outside the resolution tables — even if they \"look right\"\n- Proceeding without a project name (it goes in the DESIGN.md header)\n- Generating a preview without first writing DESIGN.md\n- Overwriting an existing DESIGN.md without asking\n- Giving a default without stating the rule that chose it\n- Copying a reference's literal assets, copy, or claims instead of its qualities — the Keep column is qualities, never artifacts\n- Writing DESIGN.md without the handoff file, leaving the next builder to re-derive the brief\n\nFollow the output format defined in docs\u002Foutput-kit.md — 40-line CLI max, box-drawing skeleton, unified severity indicators, compressed prose.\nIf output exceeds 40 lines, delegate to \u002Fatlas-report.\n",{"name":5,"tags":65,"author":67,"license":15,"version":68,"description":69,"allowed-tools":70,"compatibility":71},[50,57,66,36],"visual","tonone-ai \u003Chello@tonone.ai>","0.2.0","Translate a design brief (I-Lang or plain English) into a concrete DESIGN.md and optional HTML token preview, resolving palette, typography, layout, mood and density to CSS tokens. Use when asked to \"create a design brief\", \"write a DESIGN.md\", \"design brief for X\", or \"I-Lang brief\".\n","Read, Write, Edit, Bash, Glob, Grep, WebFetch, WebSearch, Task, TodoWrite, AskUserQuestion","Designed for Claude Code","main","117b48ffd82ffc8429954da42f2bf062e84e1b26","skills\u002Fform-brief",11,"https:\u002F\u002Fgithub.com\u002Ftonone-ai\u002Ftonone","https:\u002F\u002Fsecond.tonone.ai","https:\u002F\u002Fgithub.com\u002Ftonone-ai","https:\u002F\u002Ftonone.ai","Founded by @thisisfatih","2026-11-11 05:05:57",{"source":8,"skillName":5,"commands":83,"prompt":93,"zipAvailable":94},[84,87,90],{"tool":85,"command":86},"npx","npx skills add tonone-ai\u002Ftonone --skill form-brief",{"tool":88,"command":89},"bunx","bunx skills add tonone-ai\u002Ftonone --skill form-brief",{"tool":91,"command":92},"pnpm","pnpm dlx skills add tonone-ai\u002Ftonone --skill form-brief","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Ftonone-ai\u002Ftonone\u002Fblob\u002Fmain\u002Fskills\u002Fform-brief\u002FSKILL.md",true,[],[97,105,112,117,122,129],{"skillNo":98,"name":99,"nameZh":6,"description":100,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":101,"categories":102,"keywords":103,"publishedAt":104},"01M72QSK7R99K8FWYFNYTXJGR2","helm-autoplan","Chained brief-to-decision pipeline. Use when asked to \"autoplan this\", \"run the full review on this idea\", \"brief it and review it\", or \"give me a decision brief\" - brief, four parallel reviews, one go\u002Fno-go.","https:\u002F\u002Fgithub.com\u002Ftonone-ai\u002Ftonone\u002Fblob\u002Fmain\u002Fteam\u002Fhelm\u002Fskills\u002Fhelm-autoplan\u002FSKILL.md",[],[],"2026-11-10 22:39:42",{"skillNo":106,"name":107,"nameZh":6,"description":108,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":109,"categories":110,"keywords":111,"publishedAt":104},"01M72Q6V4CB8E877RT5KJRSSB7","apex-second-opinion","Optional cross-model review of a diff or plan through an external CLI (codex, gemini, llm) already on PATH, with redaction and per-run consent. Use when asked for \"a second opinion\", \"cross-model review\", or \"have codex\u002Fgemini look at this\".","https:\u002F\u002Fgithub.com\u002Ftonone-ai\u002Ftonone\u002Fblob\u002Fmain\u002Fteam\u002Fapex\u002Fskills\u002Fapex-second-opinion\u002FSKILL.md",[],[],{"skillNo":113,"name":99,"nameZh":6,"description":100,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":114,"categories":115,"keywords":116,"publishedAt":104},"01M72PDNJ3NS66X4QZ6AM5BG91","https:\u002F\u002Fgithub.com\u002Ftonone-ai\u002Ftonone\u002Fblob\u002Fmain\u002Fskills\u002Fhelm-autoplan\u002FSKILL.md",[],[],{"skillNo":118,"name":107,"nameZh":6,"description":108,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":119,"categories":120,"keywords":121,"publishedAt":104},"01M72NV58FG71X4Y7H8E6W721A","https:\u002F\u002Fgithub.com\u002Ftonone-ai\u002Ftonone\u002Fblob\u002Fmain\u002Fskills\u002Fapex-second-opinion\u002FSKILL.md",[],[],{"skillNo":123,"name":124,"nameZh":6,"description":125,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":126,"categories":127,"keywords":128,"publishedAt":104},"01M72NEBG81JH7YNSDXYT8NHHE","helm-office-hours","Forcing-function intake before any brief. Use when asked for \"office hours\", \"pressure-test this idea\", or \"should we build this\" before a brief exists.","https:\u002F\u002Fgithub.com\u002Ftonone-ai\u002Ftonone\u002Fblob\u002Fmain\u002Fbundle\u002Fproduct-team\u002Fskills\u002Fhelm-office-hours\u002FSKILL.md",[],[],{"skillNo":130,"name":131,"nameZh":6,"description":132,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":133,"categories":134,"keywords":135,"publishedAt":104},"01M72NE7AS597YW6999C56CESR","helm-init","Short interview that writes PRODUCT.md, the durable product truth other skills read. Use when asked to \"init product\", \"write PRODUCT.md\", or \"set up product context\". Prefills from README and repo, asks max 6 questions.","https:\u002F\u002Fgithub.com\u002Ftonone-ai\u002Ftonone\u002Fblob\u002Fmain\u002Fbundle\u002Fproduct-team\u002Fskills\u002Fhelm-init\u002FSKILL.md",[],[]]