MCP.so
ログイン

frontend-design公式

anthropics / skills

基本情報

カテゴリ

デザイン&UI

リポジトリ

anthropics / skills

Skill

frontend-design

frontend-design について

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

#Design & UI

frontend-design をインストール

npx skills add https://github.com/anthropics/skills --skill frontend-design

できること

  • Guides aesthetic direction selection (brutalist, maximalist, retro-futuristic, luxury, organic, etc.) before implementation to ensure cohesive, memorable designs

  • Emphasizes typography, color theming with CSS variables, motion design, spatial composition, and textural details as core design pillars

  • Generates working code (HTML/CSS/JS, React, Vue) that matches implementation complexity to the aesthetic vision, from refined minimalism to elaborate maximalism

  • Explicitly avoids overused fonts, clichéd color schemes, and predictable layouts that characterize generic AI-generated interfaces

コメント

デザイン&UI のその他のスキル

grill-me

mattpocock / skills

A relentless interview to sharpen a plan or design.

web-design-guidelines

vercel-labs / agent-skills

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

grill-with-docs

mattpocock / skills

A relentless interview to sharpen a plan or design, which also creates docs (ADR's and glossary) as we go.

lark-event

larksuite / cli

Lark/Feishu real-time event listening / subscribing / consuming: stream events as NDJSON via `lark-cli event consume <EventKey>` (covers IM messages/reactions/chat changes, Task updates, VC meeting started/joined/ended, Minutes generated, Whiteboard updated, etc.). Use for Lark bots, real-time message processing, long-running subscribers, streaming webhook/push handlers. Supports `--max-events` / `--timeout` bounded runs and a stderr ready-marker contract — designed for AI agents running as subprocesses.

prototype

mattpocock / skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

azure-enterprise-infra-planner

microsoft / azure-skills

Architect and provision enterprise Azure infrastructure from workload descriptions. For cloud architects and platform engineers planning networking, identity, security, compliance, and multi-resource topologies with WAF alignment. Generates Bicep or Terraform directly (no azd). WHEN: 'plan Azure infrastructure', 'architect Azure landing zone', 'design hub-spoke network', 'plan multi-region DR topology', 'set up VNets firewalls and private endpoints', 'subscription-scope Bicep deployment', 'Azure Backup for VM workloads'. PREFER azure-prepare FOR app-centric workflows.