Frontend Design
Ship distinctive landing pages, dashboards, and web-app UI with an agent that detects your design system, plans composition and motion, and verifies the result with screenshots before calling the work
Overview
frontend-design is an agent skill for the Build phase that guides production-grade web UI with design-system detection, intentional typography and motion, and screenshot verification before completion.
Install
npx skills add https://github.com/everyinc/compound-engineering-plugin --skill frontend-designWhat is this skill?
- Four-step workflow: detect context → plan design → build → verify visually with screenshots before done
- Three-level authority hierarchy: existing design system first, then explicit user direction, then skill defaults
- Layer 0 context detection scans tokens, Tailwind/config, and component libraries before imposing greenfield aesthetics
- Covers composition, typography, color, motion, and interface copy with anti-generic-AI-slop guidance
- Works on greenfield builds and modifications while respecting established codebase patterns
- Three-level authority hierarchy prioritizing existing design system over skill defaults
Adoption & trust: 624 installs on skills.sh; 20.5k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Agent-generated frontends often look like generic AI slop and ignore your existing tokens, components, and brand constraints.
Who is it for?
Solo builders shipping or refactoring web UI in repos that may already have Tailwind, component libraries, or partial design systems who want structured design decisions and visual proof.
Skip if: Pure backend or CLI work with no UI surface, or situations where you must not touch visual design and an approved design spec already forbids agent-driven layout changes.
When should I use this skill?
Any frontend work—landing pages, web apps, dashboards, admin panels, components, or interactive experiences—including greenfield builds and modifications when you need design quality, system respect, and screenshot verif
What do I get? / Deliverables
You get distinctive, system-aware interfaces with a documented detect-plan-build-verify loop and screenshot-checked finish instead of declaring done from code alone.
- Production-oriented UI pages or components aligned to detected or planned design direction
- Screenshot-backed visual verification before work is declared complete
- Documented design plan covering composition, type, color, motion, and copy choices
Recommended Skills
Journey fit
Frontend interface work—greenfield or in-repo modifications—maps to the Build phase where solo builders turn specs into shippable UI. The skill targets pages, components, dashboards, and interactive web experiences rather than APIs, infra, or distribution work.
How it compares
Use instead of one-shot “make it modern” chat prompts that skip design-system detection and never verify the rendered page.
Common Questions / FAQ
Who is frontend-design for?
It is for solo and indie builders using coding agents on landing pages, web apps, dashboards, admin panels, and reusable components who care about distinct aesthetics and respecting what is already in the repo.
When should I use frontend-design?
Use it for any frontend build or modification the skill description lists—greenfield marketing pages, app shells, dashboards, and interactive experiences—and especially when you need the agent to detect existing patterns, plan composition and motion, then verify with screenshots
Is frontend-design safe to install?
Treat it like any third-party agent skill: review the Security Audits panel on this Prism page and your org’s policy before granting filesystem, browser, or shell access the agent may need for builds and screenshots.
SKILL.md
READMESKILL.md - Frontend Design
# Frontend Design Guide creation of distinctive, production-grade frontend interfaces that avoid generic AI aesthetics. This skill covers the full lifecycle: detect what exists, plan the design, build with intention, and verify visually. ## Authority Hierarchy Every rule in this skill is a default, not a mandate. 1. **Existing design system / codebase patterns** -- highest priority, always respected 2. **User's explicit instructions** -- override skill defaults 3. **Skill defaults** -- apply in greenfield work or when the user asks for design guidance When working in an existing codebase with established patterns, follow those patterns. When the user specifies a direction that contradicts a default, follow the user. ## Workflow ``` Detect context -> Plan the design -> Build -> Verify visually ``` --- ## Layer 0: Context Detection Before any design work, examine the codebase for existing design signals. This determines how much of the skill's opinionated guidance applies. ### What to Look For - **Design tokens / CSS variables**: `--color-*`, `--spacing-*`, `--font-*` custom properties, theme files - **Component libraries**: shadcn/ui, Material UI, Chakra, Ant Design, Radix, or project-specific component directories - **CSS frameworks**: `tailwind.config.*`, `styled-components` theme, Bootstrap imports, CSS modules with consistent naming - **Typography**: Font imports in HTML/CSS, `@font-face` declarations, Google Fonts links - **Color palette**: Defined color scales, brand color files, design token exports - **Animation libraries**: Framer Motion, GSAP, anime.js, Motion One, Vue Transition imports - **Spacing / layout patterns**: Consistent spacing scale usage, grid systems, layout components Use the platform's native file-search and content-search tools (e.g., Glob/Grep in Claude Code) to scan for these signals. Do not use shell commands for routine file exploration. ### Mode Classification Based on detected signals, choose a mode: - **Existing system** (4+ signals across multiple categories): Defer to it. The skill's aesthetic opinions (typography, color, motion) yield to the established system. Structural guidance (composition, copy, accessibility, verification) still applies. - **Partial system** (1-3 signals): Follow what exists; apply skill defaults only for areas where no convention was detected. For example, if Tailwind is configured but no component library exists, follow the Tailwind tokens and apply skill guidance for component structure. - **Greenfield** (no signals detected): Full skill guidance applies. - **Ambiguous** (signals are contradictory or unclear): Ask the user before proceeding. ### Asking the User When context is ambiguous, use the platform's blocking question tool (`AskUserQuestion` in Claude Code, `request_user_input` in Codex, `ask_user` in Gemini). If no question tool is available, assume "partial" mode and proceed conservatively. Example question: "I found [detected signals]. Should I follow your existing design patterns or create something distinctive?" --- ## Layer 1: Pre-Build Planning Before writing code, write three short statements. These create coherence and give the user a checkpoint to redirect before code is written. 1. **Visual thesis** -- one sentence describing the mood, material, and energy - Greenfield examples: "Clean editorial feel, lots of whitespace, serif headlines, muted earth tones" or "Dense data-forward dashboard, monospace accents, dark surface hierarchy" - Existing codebase: Describ