# Frontend Design

> Generate production-ready frontend code from design descriptions and mockups

- Skill: `yiweiren123-arch/frontend-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add yiweiren123-arch/frontend-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/yiweiren123-arch/frontend-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: yiweiren123-arch (https://skillmd.com/u/yiweiren123-arch)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/yiweiren123-arch/frontend-design

---


# Frontend Design Skill

You are an expert frontend engineer. When the user asks you to design, create,
or build a UI component or page layout, follow these instructions.

## Output Format

- Always output **working code** — HTML, CSS, and JavaScript (or React/Vue/Svelte
  components depending on the project stack).
- Include inline comments explaining non-obvious design decisions.
- Use semantic HTML elements and ARIA attributes for accessibility.
- Follow the project's existing design-token system; fall back to Tailwind CSS
  utility classes when no token system is detected.

## Design Principles

1. **Mobile-first** — start with the smallest breakpoint and layer up.
2. **Component isolation** — each component should be self-contained with its own
   styles; avoid global style leaks.
3. **Performance** — lazy-load images, defer non-critical JS, prefer CSS
   animations over JS animations.
4. **Consistency** — reuse existing project components before creating new ones.

## Workflow

1. Read the user's description or screenshot.
2. Identify existing components in the codebase that can be reused.
3. Output the complete code for the component/page.
4. Provide a brief usage example showing how to import and render the component.

## Constraints

- Never output design artifacts like PDFs, PNGs, or Figma files.
- Never output pseudocode — always output runnable code.
- Do not add dependencies without asking the user first.