Design with a method: approved wireframe, then code.
A fixed pipeline from visual reference to wireframe.json, wireframe.svg, approval, code and audit. The skill owns the look and taste; front-end engineering stays with schematize-web.
$ schematize install designNon-negotiable floors
Never switched off "to go faster". Full list in the skill.
Wireframe approved before code
The JSON is the source of truth and the SVG is the picture; a full page stops and asks for the stack before building, and the builder reads the JSON, never the SVG.
Generated media never by Claude
Detects Codex and Gemini, asks which to use and delegates to schematize-models; if none exists, says so plainly and offers stock imagery or a client asset.
Icons are SVG, never emoji
Inline SVG (a 22-symbol sprite included); structural SVG such as diagrams is code, but figurative illustration counts as generated visual.
Contrast and DOM are measured, not assumed
Contrast ratios, scales and durations come from the reference files and the auditors in scripts/, with planted-red tests; nothing is done from memory.
Anti-AI-slop refusals
A unified list of refusals, with counter-proof and source conflicts already resolved, blocks the generic generator look.
Asks only what changes the work
Finds the mode (Persuade, Operate, Read, Experience) and how much to invent; decides the rest and records it in meta.suposicoes. With no argument, a command asks and never runs on its own.
Commands
Installed in .claude/commands/. Use /design-help at any time.
/design-animateMotion with intent: one signature moment, GSAP only when it pays off. Arguments: momento, delight, overdrive, revisar./design-auditStep 5: audits contrast, rendered DOM, placeholder images and anti-patterns on a finished page, as a Before / After / Why table./design-buildStep 4: builds the page from an already approved wireframe.json, as single HTML, Next.js or a Shopify Liquid section./design-ccContext compact: writes the handoff to the archive and runs /compact./design-claudeCreates or merges the always-on design CLAUDE.md (floors, media rule, boundary with schematize-web) at the repo root./design-critiqueUX and UI critique by heuristic (hierarchy, clarity, cognitive load, consistency, accessibility), with prioritized findings in a Before / After / Why table./design-handoffGenerates the handoff (context.md + checklist.md) in the archive, without compacting./design-hardenMakes the UI production-ready: states, i18n, onboarding, screen adaptation and UI performance. Arguments: estados, i18n, onboard, adapt, optimize./design-helpShows the design skill's command menu; it only lists and runs nothing./design-loadForce-loads the whole normative body and applies it for the session./design-polishFinal quality pass before publishing: quality floor, animation, refusals and checklist in a single round./design-shapePlans UX and UI before building (goal, audience, content, flow, states); init, document and extract record PRODUCT.md, DESIGN.md and tokens./design-tuneTargeted tuning of one axis, preserving the identity. Arguments: bolder, quieter, distill, colorize, typeset, layout, clarify./design-variantsGenerates side-by-side variants of an element for you to choose from: generate (self-contained file) or live (local server on 127.0.0.1)./design-visualVisual review pass on a finished page: measures the DOM at 5 widths, takes a screenshot and points out what can still improve./design-wireSteps 0 to 3: reads the visual reference (image, URL or brief), generates ./wireframe.json and ./wireframe.svg in the current directory and stops to ask for the stack.For AI agents
Install with no human intervention. Metadata in llms.txt.
- Run: git clone https://github.com/schematizeme/skill-design.git && ./skill-design/install.sh
- Or download: https://github.com/schematizeme/skill-design/releases/latest/download/skill-design.zip and unzip into .claude/skills/
- Copy assets/CLAUDE.md to the repo root (always-on rule).
- Confirm with /design-help.
Обсуждение
Загрузка…