skills.rest
open-mercato
open-mercatoOFFICIAL
Explore all skills by this author →
WebsiteGitHub

om-figma-design-with-ds

Generates Figma design briefs and audits existing designs against the Open Mercato design system.

1.7k|382|Updated Sep 10, 2025
Search Tags:#remediation#design brief#Figma#mockup#ui tokens#Design system#Design audit
One-click install
npx skills add https://github.com/open-mercato/open-mercato --skill om-figma-design-with-ds
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: om-figma-design-with-ds
Source: https://github.com/open-mercato/open-mercato/tree/main/.ai/skills/om-figma-design-with-ds
Command: npx skills add https://github.com/open-mercato/open-mercato --skill om-figma-design-with-ds

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Designers and developers often produce Figma mockups that drift from the shipped design system, causing rework when designs are implemented in code. This Skill bridges product ideas and Figma by producing briefs that reference the exact tokens, primitives, and layout patterns shipped in @open-mercato/ui, or by auditing existing Figma designs for DS violations.

Core Features & Use Cases

  • MODE A — New screen briefs: Generates a copy-pastable Figma design brief for list, detail, settings, dashboard, wizard, dialog, empty-state, and error screens, citing exact CSS tokens, lucide-react icons, and UI primitives.
  • MODE B — DS conformance audits: Audits an existing Figma file, frame, or screenshot against the DS and outputs a severity-ordered violation list, a remediation plan, and optional Figma variable swap commands.
  • Use Case: A product manager asks for a mockup of a new orders list page. The Skill gathers the archetype, persona, and required states, then outputs a self-contained brief specifying PageHeader, DataTable, FilterBar, StatusBadge variants, status tokens, and loading/empty/error states that a Figma-capable agent can execute without DS drift.

Quick Start

Ask the assistant to design a Figma mockup for a new screen, for example: create a Figma design brief for the sales orders list page using our design system.

Frequently Asked Questions about om-figma-design-with-ds

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

FAQPage Schema
How do I create a Figma design brief that matches my design system?▼

Provide the screen archetype, domain, primary user, goal, key fields, and required states. The Skill maps the archetype to a shipped layout pattern and outputs a brief citing exact tokens, primitives, and lucide-react icons that any Figma-capable agent can execute.

How do I audit an existing Figma design for design system compliance?▼

Paste the audit prompt template from the references file, replace the Figma URL placeholder with your link or attach a screenshot, and add one sentence of context. The output is a four-section report: summary, severity-ordered violations, remediation plan, and optional Figma variable swaps.

What screen types does the Figma brief generator support?▼

It supports list, detail/edit, create, settings, dashboard, wizard, dialog, empty-state, and error archetypes. Each maps to a shipped layout pattern such as Page with DataTable for lists or SectionPage with sticky sidebar for settings.

Can the audit fix my Figma file automatically?▼

The audit produces a remediation plan and lists variable swaps and component replacements that can be auto-applied via the figma-use MCP tools. Changes are only applied when you explicitly request it; by default the Skill only reports violations.

When should I not use this Skill for Figma work?▼

Do not use it to review existing code, implement a Figma file as code, or push app code into Figma; those belong to ds-guardian, figma-implement-design, and figma-generate-design respectively. Generic visual polish without DS context is also out of scope.

Related Skills

Explore More Design & Creative Skills→
saranskumarsaranskumar

screen-planner

Plan screens and page responsibilities from existing user journeys.

Community
Intermediate
MoxyWolfLLCMoxyWolfLLC

figma-to-code

Convert Figma design layouts into Next.js React code with Tailwind and shadcn/ui.

Official
Advanced
Radiants-DAORadiants-DAO
1

radflow-compliance

Audit and fix UI code for RadOS design conformance.

Official
Advanced
AradotsoAradotso
3

figma-flutter-mcp-design-to-code

Extract Figma design tokens, components, and screens into structured Flutter guidance.

Official
Intermediate