# Frontend Visual Systems

> Convert frontend references and product intent into design tokens, visual direction, palette, typography, icon, layout, density, and motion rules for implementation by a frontend builder.

- Skill: `yuukias/frontend-visual-systems` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add yuukias/frontend-visual-systems`
- Raw SKILL.md: https://api.skillmd.com/api/skills/yuukias/frontend-visual-systems/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: YuukiAS (https://skillmd.com/u/yuukias)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/yuukias/frontend-visual-systems

---

# Frontend Visual Systems

Use this skill to turn research and product intent into an executable visual system.

## Boundary

- Define tokens, density, typography, color, icon strategy, layout rhythm, and interaction tone.
- Do not implement the app; route implementation to the official `build-web-apps` capability or project code workflow.
- Do not rely on decorative blobs, generic purple gradients, or unexplained hero copy.
- Do not use academic or journal-inspired palettes from `palette/` as direct UI colors. Product surfaces need semantic tokens; scientific palettes may map only to chart roles.

## Workflow

1. Summarize the product job, audience, and information density.
2. Choose a coherent visual direction and one differentiating move.
3. Translate taste references into concrete constraints: image/reference first, clear hierarchy, disciplined typography, spacing rhythm, contextual brand cues, and purposeful motion.
4. Define tokens for color, type, spacing, radius, borders, charts, and motion.
5. State responsive and accessibility constraints.
6. Produce a handoff brief that a frontend implementation tool can execute.

## Quality Bar

- Avoid generic "AI page" tells: undifferentiated purple gradients, oversized cards, weak contrast, random icon mixes, decorative motion, and unsupported hero copy.
- Prefer one strong visual idea over a pile of effects.
- Use screenshot comparison and browser QA to verify hierarchy, density, text fit, responsive behavior, and motion restraint.