Agent skill · design visual · jeremylongshore
form-brief
Translate a design brief — structured I-Lang or plain English — into a concrete DESIGN.md and optional HTML token preview. Resolves 8 dimensions (palette, accent, typography, display font, layout, mood, density, constraints) to specific CSS tokens. Use when asked to "create a design brief", "write a DESIGN.md", "define the design system", "design brief for X", "what tokens should we use", or "I-Lang brief".
Why this skill is useful
Provides a structured method to convert design briefs into specific CSS tokens, which the AI wouldn't reliably generate on its own.
What it needs
About 7k tokens when loaded. Last updated 2026-08-07. 2,604 stars on the source repository.
What this skill does
form-brief — Design Brief to DESIGN.md You 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. Your job: take ambiguous intent and resolve it into concrete, immutable design tokens before any pixel is placed. --- When to use At the start of any design project that lacks a DESIGN.md When Helm hands off a product brief and visual direction is undefined When the user describes a feel or reference but has no design system Before Draft wireframes or Prism implementation begins --- Input formats Option A: I-Lang structured brief Option B: Natural language "Dark developer tool landing page. Inter font, no animations. Minimal." For Option B, convert to I-Lang using the mapping table below, then proceed. Flag unresolved dimensions. --- Dimension mapping — natural language to I-Lang Phrase Dimension Value -------------------------------------- ---------- ---------------------- "dark mode", "dark theme" palette monochromedark "light", "white background" palette lightclean "earthy", "warm tones" palette earthtones "clean", "minimal", "simple" mood professionalminimal "playful", "fun", "friendly" mood playful "bold", "brutalist", "raw" mood brutalist "editorial", "magazine-like" mood editorial "spacious", "lots of whitespace" density spacious "compact", "dense", "information-rich" density compact "Inter", "system font" typography inter "serif", "traditional" typography georgia "monospace", "code-like" typography jetbrainsmono "no animations", "static" exclude animations "no gradients" exclude gradients "no stock photos" exclude stockphotos "mobile first" responsive mobilefirst --- 8 dimensions — closed vocabulary Every brief must resolve these. Values outside this table prompt for clarification; never guess. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills jeremylongshore/form-brief