skills.rest
Final-Project-solicode-Websitee
Final-Project-solicode-WebsiteeOFFICIAL
Explore all skills by this author →
GitHub

designer-ui

Convert wireframes into Atomic Design components and Tailwind/Preline HTML mockups.

1|Updated Feb 23, 2026
Search Tags:#components#tailwind#ui-design#wireframes#design-system#mockups#atomic-design
One-click install
npx skills add https://github.com/Final-Project-solicode-Websitee/maquettage-projet-technique --skill designer-ui-final-project-solicode-websitee
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: designer-ui
Source: https://github.com/Final-Project-solicode-Websitee/maquettage-projet-technique/tree/main/.agent/skills/designer-ui
Command: npx skills add https://github.com/Final-Project-solicode-Websitee/maquettage-projet-technique --skill designer-ui-final-project-solicode-websitee

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill streamlines the handoff between design and development by converting wireframes and briefs into a coherent Atomic Design system and high-fidelity HTML mockups, reducing duplicated work and inconsistent component implementations.

Core Features & Use Cases

  • Automated Orchestration: Analyze incoming requests, plan the cascade of design actions (charte, composition, atoms, molecules, mockups) and produce an ordered workflow.
  • Design System & Tokens: Generate a project charte with color and typography tokens and produce preview HTML/CSS compatible with Tailwind and Preline.
  • Component Library & Mockups: Create isolated atom and molecule HTML files, update manifests, and assemble pixel-perfect mockups and a navigable gallery.
  • Use Case: From a wireframe file, produce a composition file, identify and create missing atoms/molecules, generate the style charter, and output a complete mockup page and gallery entry.

Quick Start

Analyze the 'home' wireframe and generate the composition, design tokens, missing atoms/molecules, and a pixel-perfect mockup.

Frequently Asked Questions about designer-ui

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

FAQPage Schema
How do I convert wireframes into HTML mockups using an atomic design system?▼

To convert wireframes into HTML mockups, this Skill analyzes your markdown files to plan a design cascade, generating isolated atoms and molecules before assembling pixel-perfect HTML mockups. It outputs Tailwind/Preline-compatible code and a navigable gallery.

What is atomic design and how does it apply to UI component creation?▼

Atomic design is a methodology that breaks interfaces down into basic building blocks. This Skill applies it by creating isolated atom and molecule HTML files, updating component manifests, and assembling them into complete mockups to ensure consistent design systems.

Do I need a validated design charter before generating Tailwind UI components?▼

Yes, a validated design charter is required as an input. This ensures the generated Tailwind and Preline-compatible HTML components, style tokens, and mockups accurately reflect your project's established color and typography guidelines.

Can I generate design tokens and style guides from existing wireframe files?▼

Yes, you can generate design tokens and style guides from wireframe files. The Skill processes your wireframes to produce a project charte containing color and typography tokens, alongside preview HTML and CSS compatible with Tailwind and Preline.

What is the best way to streamline handoff between design and development?▼

The best way to streamline handoff is converting wireframes into a coherent atomic design system with high-fidelity HTML mockups. This reduces duplicated work and inconsistent implementations by providing developers with ready-to-use Tailwind components.

Related Skills

Explore More Design & Creative Skills→
BENYEKHLEF-AnouarBENYEKHLEF-Anouar

designer-ui

Generate atomic-design UI assets and HTML mockups from wireframes.

Community
Advanced
rakovi4rakovi4
45

align-design

Compare CSS values and fix styling mismatches between components and HTML mockups.

Community
Intermediate
BigdropsBigdrops
1

konsta-ui

Develop iOS and Material Design UI components for Capacitor apps with React, Vue, or Svelte.

Community
Intermediate
Sir-chawakornSir-chawakorn
9

implement-from-design

Translate Figma designs into React and Tailwind CSS components with visual-diff verification.

Community
Advanced