skills.rest
brolag
brolagCOMMUNITY
Explore all skills by this author →
Website𝕏@brolagGitHub

workflow-frontend-design

Convert mockups into frontend UI components with design standards and validation.

11|Updated Dec 18, 2025
Search Tags:#workflow#design#ui#frontend#implementation#component#mockup
One-click install
npx skills add https://github.com/brolag/neural-claude-code --skill workflow-frontend-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: workflow-frontend-design
Source: https://github.com/brolag/neural-claude-code/tree/main/skills/workflow-frontend-design
Command: npx skills add https://github.com/brolag/neural-claude-code --skill workflow-frontend-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often struggle to align design intent with implementation, causing rework and delays.

Core Features & Use Cases

  • End-to-end frontend design workflow from discovery to overseer.
  • Apply design standards, typography, and component structure to new UI.
  • Use mockups or Figma references to drive implementation and refinements.

Quick Start

Follow the workflow to convert a provided mockup into a production-ready frontend.

Frequently Asked Questions about workflow-frontend-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert a mockup into a production-ready frontend UI?▼

To convert a mockup into a production-ready frontend UI, follow a deterministic workflow that enforces standards discovery, design application, best-practice checks, and visual validation before final review.

What is the best way to align design intent with frontend implementation?▼

The best way to align design intent with frontend implementation is using a structured workflow with deterministic steps and gates, ensuring typography and component structure standards are applied before visual validation.

Can I use Figma references to drive frontend component implementation?▼

Yes, you can use Figma references to drive frontend component implementation and refinements. The workflow applies design standards and component structure to new UI built from these references.

Does this frontend design workflow enforce best-practice checks?▼

Yes, this frontend design workflow enforces best-practice checks through deterministic steps and gates, ensuring visual validation and final review are completed during UI implementation.

Do I need a predefined design system to start the frontend design workflow?▼

You do not need a predefined design system to start. The workflow includes a standards discovery phase to identify and apply typography and component structure standards during implementation.

Related Skills

Explore More Design & Creative Skills→
jasonmeansjasonmeans
2

todo-create-figma-mockup

Convert text-based product requirements into Figma mockups.

Community
Intermediate
VidyaBodepudiVidyaBodepudi
2

browser-testing-with-devtools

Inspect frontend UI rendering, responsiveness, and accessibility with browser DevTools.

Community
Intermediate
YSheldonYSheldon

recreate-screenshot

Recreate UI screens from screenshots with pixel-perfect layout, color, and typography fidelity.

Community
Advanced
Vivekmano27Vivekmano27

ui-wireframes

Generate structured UI wireframes and component specifications in Markdown.

Community
Intermediate