Frontend Design
Visual direction and implementation
Setup: A coding agent and the target application's toolchain
Choose a design direction from the brief. It does not establish accessibility or browser correctness.
Read pinned SKILL.md ↗Practical task guide
Frontend Design Skill Workflow: Brief, Build and Review
Compare frontend design skills by task: landing pages, product dashboards, Figma implementation, accessibility review and React performance. Explore editable examples.
Decision prompt
Help me create a distinctive landing page. Ask for missing inputs, choose by output, explain dependencies, and deliver a checked file without inventing results.
6
Sources
standard
Intent
Design and creativeSource-based selection · not a runtime test
Published by OpenAgentSkill. This workflow follows pinned upstream instructions. Inspect the source, prerequisites and deliverable checks before installing. Editorial update: .
Sources and examples
Compare workflows
Task fit, source instructions, setup and limitations.
Frontend Design source profile
Visual direction and implementation
UI UX Pro Max source profile
UI systems and product interfaces
Taste Skill source profile
Landing pages and purposeful redesigns
Figma Implement Design source profile
Implement an approved design
Recommended shortlist
Start with these skills
UI UX Pro Max
UI systems and product interfaces
Setup: Keep the source's data and scripts; inspect its client-specific setup
Use for product UI and dashboards. Searchable design guidance is not a usability study.
Read pinned SKILL.md ↗Taste Skill
Landing pages and purposeful redesigns
Setup: A coding agent with access to the brief and existing code
The checked source excludes dashboards, data tables and multi-step product UI.
Read pinned SKILL.md ↗Figma Implement Design
Implement an approved design
Setup: Figma MCP, an accessible design URL or selected desktop node, and repository access
Requires the actual design and access. A screenshot-only reconstruction is a different task.
Read pinned SKILL.md ↗Web Design Guidelines
Review an implementation
Setup: UI files and access to the source's current guidelines
Reviews existing UI. It does not generate an entire application or certify compliance.
Read pinned SKILL.md ↗Vercel React Best Practices
React and Next.js performance
Setup: An existing React / Next.js project and its checks
Measure affected user flows after changes. Static guidance is not a performance benchmark.
Read pinned SKILL.md ↗How to use this guide
Move from search to adoption
01
Prepare
Write a brief with the audience, page type, approved content, stack and target viewports.
02
Choose
Choose one design workflow. For a Figma implementation, supply the accessible frame and its assets.
03
Create
Implement a small page or representative state, then check keyboard use, mobile layout and empty / error states.
04
Verify
Review the result and keep the design input, source revision, code and browser evidence together.
Evaluation notes
What to check before installing
Choose the input and output
A landing page, a product dashboard and a Figma handoff need different kinds of help. Choose a design skill for the page you are building, then add implementation and review skills where the task calls for them.
- +Create a distinctive landing page: Start from the audience, product brief and visual direction. Taste Skill is an alternative for landing pages and redesigns.
- +Build a dashboard or product interface: Choose product UI guidance with tables, charts and interaction rules. The checked Taste Skill source explicitly excludes dashboards.
- +Implement a Figma frame: Provide an accessible frame, its assets and tokens through Figma MCP. Verify fidelity against the source design.
- +Review UI or React performance: Review the resulting interface; add React Best Practices for rendering and data-fetching concerns.
Keep evidence with the deliverable
Source review, an editorial example and a successful runtime test answer different questions. Record which one you actually have.
- +Keep the supplied input, selected source revision, runtime and output file together.
- +Check the saved artifact and record any limitations or failures.
- +The examples identify how they were produced; they are not a comparative benchmark.
FAQ
Common questions
Which frontend design skill should I choose for a dashboard?
UI UX Pro Max covers product interfaces and charts in its checked source. Taste Skill targets landing pages, portfolios and redesigns and excludes dashboards. Add browser and accessibility checks to either implementation path.
Is a Figma-to-code skill the same as a design generator?
No. Figma Implement Design translates an accessible design into repository code. It needs Figma MCP and a frame or selection; visual design from a brief is a different workflow.
Were all compared skills run on these examples?
No. The comparison describes pinned upstream instructions. The downloadable examples are original OpenAgentSkill editorial fixtures, with their own production and verification notes.
Next guides
Keep building the workflow
Practical task guide
Remotion skills workflow
Understand official Remotion agent skills, their setup and limitations. Download an original React composition and MP4 example, and follow the render verification steps.
Practical task guide
PDF parsing skills workflow
Choose a PDF skill for Claude Code by task: digital text, tables, scanned-page OCR or markdown conversion. Check dependencies and reconcile the extracted output.
Practical task guide
Excel and XLSX skills workflow
Use an XLSX skill for CSV cleanup, typed cells, formulas and editable Excel delivery. Download a messy CSV and the checked workbook example with missing values preserved.
Examples you can inspect
These original editorial fixtures demonstrate the deliverables and checks to ask for. Their production notes identify how they were made; they are separate from upstream Skill instructions.
A landing page from a product brief
- Input
- A fictional task-management product, approved sample copy and an accessible single-page layout.
- Output
- A responsive HTML landing page with keyboard-visible navigation and an FAQ.
Original OpenAgentSkill editorial example. Browser layout checked at desktop and mobile widths; local links and headings inspected.
Sample copy and figures are fictional. This is not a comparative run of the listed design skills.
A product dashboard with useful states
- Input
- A fictional operations dashboard with a task table, status labels and an empty-state specification.
- Output
- Responsive HTML with sample records, an accessible filter and a meaningful empty state.
Original editorial example. Filter interaction and the empty state checked in a browser; sample records remain local.
No live backend or customer metrics. It demonstrates product UI requirements, not backend integration or a usability study.
A design-token handoff to code
- Input
- A local component specification with explicit colors, spacing, type and card dimensions.
- Output
- An HTML component implementation and its machine-readable design tokens.
Original editorial fixture. The implemented colors, spacing and card width are compared with the supplied local token specification.
The source is a local design specification, not a private Figma file. A real Figma fidelity check requires your accessible frame and Figma MCP.