| name | frontend-design |
| description | Create distinctive, production-grade frontend interfaces with high design quality. Use for web components, pages, dashboards, applications, posters, HTML/CSS layouts, or styling/beautifying web UI while avoiding generic AI aesthetics. |
| license | Complete terms in LICENSE.txt |
Frontend Design
Read the shared contracts before output: ../_shared/operator-output.md, ../_shared/attention-budget.md, ../_shared/evidence-record.md, ../_shared/state.md, ../_shared/cognitive-load.md, ../_shared/collaboration.md.
Purpose
Build a usable interface that fits the product, audience, and workflow.
Inputs
User request, existing UI/codebase, design references, target audience, technical constraints, or attached assets.
Reads
Existing components/styles, package/framework conventions, design assets, relevant screenshots, and browser verification results when available.
Writes
- frontend code/assets
.context/frontend-design.md for design rationale and visual QA notes.context/session-state.md for substantial work
Process
- Inspect existing UI patterns before designing.
- Choose one clear aesthetic direction tied to the domain.
- Build the actual usable experience, not a marketing shell unless requested.
- Use real/generative visual assets when the experience needs visual substance.
- Keep controls complete and ergonomic for the target workflow.
- Verify responsive layout, text fit, overlap, and critical interactions with the tightest available browser/screenshot loop.
- Put design rationale, rejected directions, and QA notes in
.context/frontend-design.md.
Design Rules
- Avoid generic AI aesthetics, default font/color choices, and decorative noise.
- Match density to domain: operational tools should be quiet and scannable; games/creative tools may be expressive.
- Prefer familiar controls: icons for tools, toggles for booleans, sliders/inputs for numbers, tabs for views, menus for option sets.
- Do not nest cards inside cards.
- Do not use decorative orbs, blobs, or bokeh backgrounds.
- Do not scale font size with viewport width.
- Keep text inside its container on mobile and desktop.
- Use icons from the app's icon library when available.
- Use Three.js for primary 3D scenes and verify the canvas is nonblank and framed.
Operator Output
Return what was built, up to three evidence bullets including verification, remaining risk, and how to view/run it. Put detailed design notes in .context/frontend-design.md.
Stop Conditions
Stop if required product intent or assets are missing and cannot be reasonably inferred, or if visual verification cannot run for a UI change that needs it.
