# Frontend Design

> 设计或改进仪表盘、表单、表格等功能型网页界面。

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

---


# Frontend design

Use this for product interfaces such as dashboards, forms, workflows, tables, and application screens. Use `taste-skill` instead for premium marketing, portfolio, or editorial sites.

Read [references/product-ui.md](references/product-ui.md) when the task changes a complete screen or interaction flow. Small local UI fixes can use the shared constraints below without loading the reference.

## Shared constraints

- Follow the existing design system and component library before adding a new pattern.
- Make hierarchy, primary action, grouping, and navigation obvious from layout, not decoration.
- Preserve behavior and data flow unless the request includes changing them.
- Cover the loading, success, error, empty, disabled, focus, and responsive states the changed feature can actually enter.
- Use real content shapes and realistic data density; do not invent claims or hide missing states behind placeholders.
- Check the rendered result at the viewports and interaction states affected by the change.

Completion means the requested UI is implemented, affected states and interactions work, the result has been rendered and inspected, and any issues found have been fixed and rechecked.