Which integrations are available for this server?

Enables exporting design tokens to Figma in the Figma Tokens JSON format, facilitating design system token synchronization.

How do I use SIN-Code-Frontend-Design-Skill?

1. Click on "Install Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@SIN-Code-Frontend-Design-Skill generate a primary button component for React" That's it! The server will respond to your query, and you can continue using it as needed. Here is a step-by-step guide with screenshots.

SIN-Code-Frontend-Design-Skill

by OpenSIN-Code

Overview Schema Related Servers Score Discussions

Python

Local

SIN-Code-Frontend-Design-Skill

GitNexus CEO Audit

SOTA design system + philosophy (Anthropic-compatible). 8 MCP tools, 6 bash scripts, 100% CoDocs, 202 passing tests. Falls back to templates if the v0-pool is offline.

The SIN counterpart to Anthropic's official frontend-design skill (277K installs). Provides a design system, component generator, page scaffolder, and WCAG 2.2 AA checker that agents load before writing frontend code.

Architecture

Agent (opencode / Cursor / Claude)
    ↓ loads skill
SIN-Code-Frontend-Design-Skill
    ├─ MCP tools (8)
    ├─ Bash scripts (6)
    ├─ Python modules (8)
    └─ v0-pool integration (http://localhost:27401/v1)
         ↓ complex prompts
    SINator-v0 (v0-1.5-lg)
         ↓ simple prompts
    v0-1.5-md
         ↓ offline → templates
    Built-in component specs

Related MCP server: MCP Frontend Tools Server

MCP Tools

Tool	Purpose
`design_system_load`	Load the SOTA design system (tokens, themes, philosophy)
`design_component_create`	Generate button/input/card/modal specs
`design_page_scaffold`	Scaffold a full page from a layout + sections
`design_review`	Review code for design system consistency
`design_token_extract`	Extract tokens from CSS/Tailwind/JSON/Figma
`design_a11y_check`	WCAG 2.2 AA compliance check + contrast
`design_responsive_test`	Generate breakpoints, identify current tier
`design_figma_export`	Export tokens to Figma Tokens JSON

Quick-Start

git clone https://github.com/OpenSIN-Code/SIN-Code-Frontend-Design-Skill.git
cd SIN-Code-Frontend-Design-Skill
chmod +x install.sh
./install.sh

Usage

As MCP server

# Launch the FastMCP server
python3 -m sin_frontend_design.mcp_server

From Python

from sin_frontend_design import (
    DesignSystem,
    ComponentGenerator,
    PageScaffolder,
    DesignReviewer,
    TokenExtractor,
    A11yChecker,
    BreakpointGenerator,
)

# 1. Load the design system
ds = DesignSystem()
print(ds.philosophy())

# 2. Generate a component
g = ComponentGenerator()
button = g.button(framework="react", variant="primary", size="md", label="Save")
print(button.code)

# 3. Scaffold a page
s = PageScaffolder()
page = s.scaffold(layout="landing", framework="html", title="My SaaS")
print(page.code)

# 4. Review existing UI
reviewer = DesignReviewer()
report = reviewer.review("<button>Click</button>")
print(report.score, report.findings)

# 5. Extract tokens from existing CSS
extractor = TokenExtractor()
tokens = extractor.extract(open("tokens.css").read(), source_format="css")

# 6. Check WCAG 2.2 AA
checker = A11yChecker()
a11y = checker.check(open("page.html").read())
print(a11y.ok, a11y.score)

# 7. Get responsive breakpoints
bg = BreakpointGenerator()
print(bg.test(viewport_width=1280))  # 'lg'

From shell

# Load the design system
./scripts/design-load.sh

# Generate components
./scripts/design-component.sh button --framework=react --variant=primary
./scripts/design-component.sh input --framework=html --placeholder="Email"
./scripts/design-component.sh card --framework=react
./scripts/design-component.sh modal --use-v0

# Scaffold a page
./scripts/design-page.sh landing --framework=html --title="My SaaS"
./scripts/design-page.sh pricing --framework=react

# Review UI
./scripts/design-review.sh path/to/page.html
echo "<button>Click</button>" | ./scripts/design-review.sh -

# Extract tokens
./scripts/design-tokens.sh tokens.css
./scripts/design-tokens.sh tailwind.config.js --format=tailwind

# Check accessibility
./scripts/design-a11y.sh page.html
./scripts/design-a11y.sh page.html --fg=#000000 --bg=#ffffff

Design Philosophy

Hierarchy is created by contrast, not by decoration.
Type is the primary voice — choose one family and use scale.
Color is functional: primary, secondary, success, warning, error, neutral.
Spacing follows a 4px grid — never arbitrary values.
Motion is felt, not seen: 200ms hovers, 300ms transitions.
Components are predictable: same name, same shape, same tokens.
States are explicit: default, hover, focus, active, disabled.
Accessibility is non-negotiable: WCAG 2.2 AA is the floor.
Dark mode is not inverted — it's a parallel semantic map.
Famous brands feel calm because they use restraint.

Token reference

Typography (px)

12 · 14 · 16 · 18 · 20 · 24 · 30 · 36 · 48 · 60 · 72

Spacing (px, 4px grid)

4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96

Motion

Hover: 200ms ease-out
Transition: 300ms ease-in-out
Page: 500ms cubic-bezier(0.16, 1, 0.3, 1)

Radius

Default: 8px
Card: 16px

Color ramps (50–900)

neutral — slate
primary — indigo
secondary — violet
success — green
warning — amber
error — red

Tests

# All tests
PYTHONPATH=src python3 -m pytest tests/ -v
# 202 passed

CoDocs

100% CoDocs coverage — every .py in src/sin_frontend_design/ has a matching .doc.md companion, and every .sh script and test file does too.

v0-pool integration

The design_component_create tool calls the v0-pool at http://localhost:27401/v1 when use_v0=true:

Complex prompts (>200 chars) → v0-1.5-lg
Simple prompts → v0-1.5-md
Offline / failure → fall back to built-in templates

Files

SIN-Code-Frontend-Design-Skill/
├── README.md
├── SKILL.md
├── CHANGELOG.md
├── AGENTS.md
├── INSTALL.md
├── install.sh
├── pyproject.toml
├── requirements.txt
├── .gitignore
├── .github/workflows/ceo-audit.yml
├── src/sin_frontend_design/
│   ├── __init__.py (+ .doc.md)
│   ├── system.py (+ .doc.md)     — typography, color, spacing, motion
│   ├── components.py (+ .doc.md)  — button/input/card/modal specs
│   ├── pages.py (+ .doc.md)       — page scaffolder (hero, features, ...)
│   ├── reviewer.py (+ .doc.md)    — design system review
│   ├── tokens.py (+ .doc.md)      — token extraction (CSS/Tailwind/Figma)
│   ├── a11y.py (+ .doc.md)        — WCAG 2.2 AA checker
│   ├── responsive.py (+ .doc.md)  — breakpoint generator
│   └── mcp_server.py (+ .doc.md)  — FastMCP server with 8 tools
├── scripts/
│   ├── design-load.sh
│   ├── design-component.sh
│   ├── design-page.sh
│   ├── design-review.sh
│   ├── design-tokens.sh
│   └── design-a11y.sh
└── tests/
    ├── test_system.py
    ├── test_components.py
    ├── test_pages.py
    ├── test_reviewer.py
    ├── test_tokens.py
    ├── test_a11y.py
    ├── test_responsive.py
    ├── test_server.py
    ├── test_scripts.py
    └── test_codocs.py

SINator-v0 — v0.dev pool
SIN-Code-Bundle — unified CLI
Anthropic frontend-design — original

License

OpenSIN AI · Open source · Built for agents.

Install Server

license - not found

quality

maintenance

How are these scores calculated?

Maintenance

–Maintainers

–Response time

–Release cycle

–Releases (12mo)

Commit activity

Resources

GitHub Repository

Need Help?

Related Servers

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Tools

Latest Blog Posts

Your AI Chatbot Just Exposed Your CEO's Salary to an Intern
By Om-Shree-0709 on July 2, 2026.
Agent Identity
MCP Security
OAuth Delegation
Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)
By Om-Shree-0709 on June 30, 2026.
Agentic Ai
Prompt Injection
WebAssembly
Lightport: Open-Sourcing Glama's AI Gateway
By punkpeye on April 27, 2026.
OpenAI
open source

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/OpenSIN-Code/SIN-Code-Frontend-Design-Skill'

If you have feedback or need assistance with the MCP directory API, please join our Discord server