About this skill

Problem

Frontend delivery often gets stuck between “polished but hard to maintain” and “functional but rough”: the visual direction lacks a clear principle, prototypes drift from production pages, and responsive layouts, interaction states, and accessibility are patched in late, causing rework. This skill chains cn-frontend-design, cn-web-design-engineer, cn-frontend-ui-engineering, and cn-web-design-guidelines into one concept-to-production workflow, suitable for websites, landing pages, dashboards, UI components, animations, data visualizations, and design systems.

Workflow and limits

Stage 1: use cn-frontend-design to define a distinct visual direction, avoid generic AI aesthetics, and set the design language for websites, landing pages, dashboards, and posters.
Stage 2: use cn-web-design-engineer to build or reshape polished pages, interactive prototypes, HTML slides, animations, UI models, and design systems.
Stage 3: use cn-frontend-ui-engineering to implement production-grade layouts, responsive behavior, interaction states, and accessibility for shippable UI quality.
Stage 4: use cn-web-design-guidelines to audit UI code, check accessibility, review design and UX, and validate output against best practices.

Boundary: it is better suited to full frontend tasks. For a one-line CSS fix, static icon replacement, or backend-only API work, skip the full workflow. In production, still validate against real business data, brand assets, test environments, and team component conventions.

Screenshots

Use Cases

Define the visual direction for a product landing page, then create an interactive HTML prototype and consistent layout without generic AI aesthetics.
Refactor a static dashboard into a responsive interface, add interaction states, and run an accessibility audit against UI guidelines before release.
Design the visual language for a data-visualization prototype, then deliver a UI code review focused on accessibility and best practices.
Take a landing page from concept to production by chaining visual direction, prototyping, responsive layout, accessibility review, and a final UI audit.

Best For

Frontend engineers rebuilding product landing pages who need a distinctive, non-template visual direction
Product engineers auditing dashboards for interaction states and accessibility before release
Data product managers moving visualization prototypes toward production-grade UI components
Independent product designers unifying design language across websites, landing pages, and components