Ce Frontend Design
Ship landing pages, dashboards, and components that look intentionally designed instead of generic AI UI slop.
Overview
ce-frontend-design is an agent skill for the Build phase that guides distinctive, production-grade web UI through context detection, intentional design planning, implementation, and screenshot verification.
Install
npx skills add https://github.com/everyinc/compound-engineering-plugin --skill ce-frontend-designWhat is this skill?
- Authority hierarchy: existing design system beats skill defaults; user instructions override defaults
- Four-step workflow: detect context → plan design → build → verify with screenshots before done
- Layer 0 context detection scans the repo for design tokens, components, and patterns before imposing opinions
- Covers composition, typography, color, motion, and copy for greenfield and in-app modifications
- Screenshot-based visual verification gate so the agent cannot declare completion without checking the UI
- 4-step workflow: detect context → plan → build → verify visually
Adoption & trust: 1.5k 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 interchangeable and ignore your existing design system until you manually polish every screen.
Who is it for?
Solo builders shipping or refactoring React/Vue/HTML UIs who want a structured design process and a hard visual check before merge.
Skip if: Pure backend/API work, native mobile-only screens with no web surface, or teams that already forbid agents from touching UI and have a locked Figma-only handoff.
When should I use this skill?
Any frontend work—landing pages, web apps, dashboards, admin panels, components, or interactive experiences; greenfield or modifying existing applications.
What do I get? / Deliverables
You get interfaces that respect codebase patterns or deliberate greenfield direction, with visual proof via screenshots before the task is closed.
- Implemented UI pages or components
- Screenshot-verified visual result aligned with design hierarchy rules
Recommended Skills
Journey fit
How it compares
Use instead of asking the agent to “make it pretty” in chat—this is a procedural frontend workflow with hierarchy rules and a verify step, not a one-off CSS tweak.
Common Questions / FAQ
Who is ce-frontend-design for?
Indie and solo builders using Claude Code, Cursor, or similar agents to build or refine web UIs who care about craft and consistency with an existing app.
When should I use ce-frontend-design?
During Build when creating landing pages, dashboards, admin panels, components, or interactive web experiences—including edits to apps that already have a design system.
Is ce-frontend-design safe to install?
It is a local workflow skill focused on code and screenshots; review the Security Audits panel on this Prism page and scope filesystem/browser permissions your agent grants before running verify steps.
SKILL.md
READMESKILL.md - Ce 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 (call `ToolSearch` with `select:AskUserQuestion` first if its schema isn't loaded), `request_user_input` in Codex, `ask_user` in Gemini, `ask_user` in Pi (requires the `pi-ask-user` extension). Fall back to presenting options in chat only when no blocking tool exists in the harness or the call errors (e.g., Codex edit modes) — not because a schema load is required. Never silently skip. If the user declines to pick, 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 checkpo