Back to Marketplace

Install this skill free

This is a Claude/Cursor skill. Install it then use it directly in your AI assistant.

Install this skill free →
FREE
Verified
Career Boost
Community · Free Forever

Frontend Design Skill

Free · MIT licensed·Original author: original author·View on GitHub →

Eight locked design systems. Pick one. Ship fast. Never debate tokens again.

❌ Designers and developers waste hours debating color, typography, and spacing choices without a principled system to guide decisions.

✅ Pick one aesthetic anchor before coding, lock your CSS tokens to it, and ship consistent, cohesive interfaces in a single pass.

  • ✓Eight pre-built aesthetic anchors with locked CSS token sets
  • ✓Palette, typography, and texture unified per anchor choice
  • ✓Context-driven anchor selection workflow with routing grammar
  • ✓Single-pass consistency from brief to shipped interface

👁 3 views · ✨ Be first to install

Install in one line

$ mfkvault install frontend-design-skill

Requires the MFKVault CLI. Prefer MCP?

Install for your agent

Pick your agent → choose your OS → copy the command. The CLI does both steps for you.

Recommended · MFKVault CLI
Works on all agents
npx mfkvault install frontend-design-skill

Requires MFKVault CLI — writes skill.md to the right folder for the agent you pick.

Manual install
cp skill.md "~/.claude/skills/frontend-design-skill/"

Assumes you already have skill.md in your working directory. Need it? See the curl alternative below.

curl alternative · one-shot download + install
mkdir -p "~/.claude/skills/frontend-design-skill" && curl -fsSL https://raw.githubusercontent.com/Ilm-Alan/frontend-design/main/SKILL.md -o "~/.claude/skills/frontend-design-skill/skill.md"

Third-party skill — review the source, license, and security before installing. Folders default to ~/.claude/skills/frontend-design-skill/.

No reviews yet
🤖 Claude Code💻 Codex
This helper was discovered by MFKVault crawlers from public sources. Original author retains all rights. To request removal: [email protected]
Community helper
This helper was discovered by MFKVault crawlers from public sources. MFKVault does not create, maintain, or guarantee the output of this helper. Results are AI-generated and may be incomplete, inaccurate, or outdated. Use at your own risk. Original author retains all rights. Request removal
FREE

Free to install — no account needed

Copy the command below and paste into your agent.

Instant access • No coding needed • No account needed

What you get in 5 minutes

  • Full skill code ready to install
  • Works with 3 AI agents
  • Lifetime updates included
VerifiedSecureBe first to install
▸Advanced: use with your AI agent

Description

Frontend design skill for Claude Code, Codex, and Gemini CLI. Eight aesthetic anchors, each locking palette, typography, and texture to specific CSS tokens. Pick one per brief.

Preview in:

Security Status

Verified

Manually verified by security team

Time saved
How much time did this skill save you?

MFKVault Services

Need help with this skill?

The skill is free. We sell our time to install it, adapt it to your business, or run it for you weekly. Skill stays MIT-licensed — you can cancel any service at any time.

Quick Help

$49one-time

30-min setup call. We help you install and configure this skill for your specific use case.

Book now →
MOST POPULAR

Custom Adaptation

$99delivered in 48h

We modify this skill for your specific business or workflow. Delivered in 48 hours.

Order now →

Done-For-You

$499per month · cancel anytime

We run this skill for you weekly. Email results. Cancel anytime.

Subscribe →

Services are labor sold by MFKVault. The underlying community skill remains open source under its original license. Refunds within 7 days if work has not started.

Related AI Tools

More Career Boost tools you might like

Gemini Delegate (ACP)

Free

Delegate coding tasks to Gemini CLI via ACP (Agent Client Protocol) for prototyping, debugging, code review, and web search. Structured JSON output with tool calls, thoughts, and plans. Permission-controlled file access. Multi-turn sessions. Proactiv

Run free

OpenClaw DS 源生成技能 (claw-ds-generator)

Free

"根据用户提供的目标网址（如小说、影视、漫画网站），自动分析网页结构或 API，生成对应的 drpy-node spider 规则 (ds源/var rule={})。当用户要求写源或制作规则时调用。"

Run free

SkillCompass - AI Skill Quality Evaluator & Manager

Free

Evaluates AI skill quality across 6 dimensions, identifies weakest areas, and provides automated improvements with usage tracking

Run free

Flutter AI UI Design Skill

Free

Transforms AI coding assistants into Flutter UI experts with design systems, Material 3 guidelines, accessibility checklists, and performance optimization for production-ready mobile apps

Run free

Skill Tutor - Turn Claude Skills into Learning Paths

Free

Transforms any Claude skill into a personalized human learning path with spaced repetition, interleaved challenges, and conversational delivery

Run free

claude-to-im

Free

Bridge Claude/Codex sessions to messaging apps like Telegram, Discord, WeChat, and Feishu for mobile chat access

Run free

Attribution

This skill was discovered by an automated crawler from a public GitHub repository. The original author retains all rights. MFKVault shows a short, AI-generated summary — not the original content — to help users find it.

View original on GitHub →

License: MIT

If you are the author and want this removed, contact [email protected]. We will remove it within 24 hours.