visual-design-foundations — community visual-design-foundations, XRK-AGT, sunflowermm, community, ai agent skill, ide skills, agent automation, AI agent skills, Claude Code, Cursor, Windsurf

v1.0.0
GitHub

About this Skill

Perfect for UI/UX Agents needing consistent visual design foundations and reusable design frameworks. 这是基于多语言所搭建的基于web,工作流,新型算法组件的智能体

sunflowermm sunflowermm
[107]
[8]
Updated: 3/20/2026

Quality Score

Top 5%
25
Excellent
Based on code quality & docs
Installation
SYS Universal Install (Auto-Detect)
> npx killer-skills add sunflowermm/XRK-AGT/visual-design-foundations
Supports 19+ Platforms
Cursor
Windsurf
VS Code
Trae
Claude
OpenClaw
+12 more

Agent Capability Analysis

The visual-design-foundations skill by sunflowermm is an open-source community AI agent skill for Claude Code and other IDE workflows, helping agents execute tasks with better context, repeatability, and domain-specific guidance.

Ideal Agent Persona

Perfect for UI/UX Agents needing consistent visual design foundations and reusable design frameworks.

Core Value

Empowers agents to establish consistent typography systems, color systems, and spacing guidelines using design tokens and component-based rules, generating deterministic design frameworks in formats like .md for documentation and .svg for iconography.

Capabilities Granted for visual-design-foundations

Unifying visual languages across multiple pages and components
Debugging mixed typography and color systems for better contrast and readability
Generating reusable design checklists for consistent spacing and iconography

! Prerequisites & Limits

  • Not suitable for replacing interaction flow and business logic design
  • Requires predefined design principles and guidelines for effective implementation
Project
SKILL.md
1012 B
.cursorrules
1.2 KB
package.json
240 B
Ready
UTF-8

# Tags

[No tags]
SKILL.md
Readonly

权威入口

  • .cursor/skills/visual-design-foundations/references/typography-systems.md
  • .cursor/skills/visual-design-foundations/references/color-systems.md
  • .cursor/skills/visual-design-foundations/references/spacing-iconography.md

适用场景

  • 需要统一视觉语言并建立可复用规范。
  • 需要修复页面层级混乱、对比不足、节奏失衡。
  • 需要沉淀基础视觉 token 与组件视觉规则。

非适用场景

  • 不用于替代交互流程与业务逻辑设计。
  • 不用于单次临时页面的随意风格调整。

执行步骤

  1. 先定义字体层级与字重使用边界。
  2. 约定主辅色、语义色和中性色梯度。
  3. 统一间距尺度与组件内外边距节奏。
  4. 规范图标风格、尺寸与对齐策略。
  5. 形成可复用的设计检查清单。

常见陷阱

  • 字体和颜色缺少语义命名,难以维护。
  • 同一页面混用多套间距节奏。
  • 图标视觉重量不一致,导致界面噪声高。

FAQ & Installation Steps

These questions and steps mirror the structured data on this page for better search understanding.

? Frequently Asked Questions

What is visual-design-foundations?

Perfect for UI/UX Agents needing consistent visual design foundations and reusable design frameworks. 这是基于多语言所搭建的基于web,工作流,新型算法组件的智能体

How do I install visual-design-foundations?

Run the command: npx killer-skills add sunflowermm/XRK-AGT/visual-design-foundations. It works with Cursor, Windsurf, VS Code, Claude Code, and 19+ other IDEs.

What are the use cases for visual-design-foundations?

Key use cases include: Unifying visual languages across multiple pages and components, Debugging mixed typography and color systems for better contrast and readability, Generating reusable design checklists for consistent spacing and iconography.

Which IDEs are compatible with visual-design-foundations?

This skill is compatible with Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer. Use the Killer-Skills CLI for universal one-command installation.

Are there any limitations for visual-design-foundations?

Not suitable for replacing interaction flow and business logic design. Requires predefined design principles and guidelines for effective implementation.

How To Install

  1. 1. Open your terminal

    Open the terminal or command line in your project directory.

  2. 2. Run the install command

    Run: npx killer-skills add sunflowermm/XRK-AGT/visual-design-foundations. The CLI will automatically detect your IDE or AI agent and configure the skill.

  3. 3. Start using the skill

    The skill is now active. Your AI agent can use visual-design-foundations immediately in the current project.

Related Skills

Looking for an alternative to visual-design-foundations or another community skill for your workflow? Explore these related open-source skills.

View All

openclaw-release-maintainer

Logo of openclaw
openclaw

openclaw-release-maintainer is a specialized AI agent skill for automating release management workflows, ensuring consistency and accuracy in the release process.

333.8k
0
Data

widget-generator

Logo of f
f

Generate customizable widget plugins for the prompts.chat feed system

149.6k
0
Design

flags

Logo of vercel
vercel

The React Framework

138.4k
0
Browser

pr-review

Logo of pytorch
pytorch

Tensors and Dynamic neural networks in Python with strong GPU acceleration

98.6k
0
AI