| name | web-ui |
| description | Build web UI pages with layout hierarchy, interaction states, responsive QA, and strict high-fidelity replication mode. Use when implementing or replicating websites/pages, especially for one-to-one visual parity and animation parity requests. |
Web UI Design Skill
Purpose
Produce implementable web UI with clear hierarchy, complete interaction behavior, and responsive reliability.
Modes
Standard Mode
Use for normal product UI implementation.
High-Fidelity Replication Mode
Use when user asks for “复刻 / 一比一 / pixel-perfect / 像素级”.
Required execution order:
- Capture source structure and assets (sections, icons, logos, images, fonts, key CSS)
- Implement structure parity before enhancement
- Implement interaction parity (hover/focus/active/accordion/carousel/marquee)
- Run responsive parity checks (mobile/tablet/desktop)
- Run final parity checklist and report gaps
If the user explicitly wants exact visual/functional parity and source allows embedding, prefer mirror strategy (iframe) as the default highest-fidelity path.
Skill Pack
1) layout-hierarchy
Inputs
- Product goal and primary task
- Screen/page list
- Content and visual priority
Workflow
- Define primary action and visual entry point.
- Recreate section order and density.
- Match spacing rhythm and container widths.
- Deliver implementation-ready structure.
Output Contract
- Section blueprint with order and priorities
- Type scale and spacing rules
- Component grouping rules
2) state-spec
Inputs
- Core interactive components
- Trigger events (hover/focus/active/disabled/loading/error)
- Accessibility constraints
Workflow
- Enumerate required states per component.
- Define visual/behavior deltas.
- Add keyboard/focus behavior.
- Add motion details (duration/easing/delay).
Output Contract
- Component-state matrix
- State behavior notes
- Accessibility notes
- Motion notes
3) responsive-qa
Inputs
- Breakpoint strategy
- Key user journeys
- Current implementation
Workflow
- Validate mobile/tablet/desktop behavior.
- Identify overflow, truncation, misalignment, missing icons.
- Prioritize by flow impact.
- Return concrete fix list.
Output Contract
- Responsive issue list
- Breakpoint-specific fix guidance
- Recheck checklist
- Breakpoint behavior matrix
High-Fidelity Parity Checklist (Mandatory in Replication Mode)
- All source icons/logos/images visible (no placeholder text substitution)
- Hero/background/CTA visuals match source assets
- Typography weight/size/line-height matches at major breakpoints
- Section order and content density match
- Core interactions work: nav buttons, accordion, carousel, marquee, CTA links
- Hover/focus/active states present for interactive controls
- No major layout overflow at 390px / 768px / 1440px
- Final report includes: done items, known gaps, and why
Shared In Scope
- Structure, visual hierarchy, interaction behavior, responsive closure
Shared Out of Scope
- Backend/APIs
- CI/CD and infra
- Non-product marketing operations
Source Mapping
