TypingMindTypingMindThe best frontend for AI
Frontend Ui Foundry logo

Frontend Ui Foundry

Community
jiushiwon
frontend-ui-foundry

Use when generating UI for a specific scenario (mobile/PC/官网/管理端/营销页/文档/金融/原生/3D), when refactoring an existing HTML/Vue/React project to a unified design system, when extracting design tokens from code, when applying a brand style, or when auditing a frontend project for design and code quality. Covers 8 scenarios, 10 mainstream color palettes, 15 font pairings, 4pt spacing scale, OKLCH color strategy, and 6 tech stacks (HTML+Tailwind/React+Next/Vue+Nuxt/uniapp/RN/Svelte).

Overview

Publisherjiushiwon
Repositorywg-skills
Skill namefrontend-ui-foundry
Stars
123
Forks
38
Bundled files
48
LicenseApache-2.0
Links
Skill sourceRepository
  • Markdown instructions

    A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.

  • Works with any LLM

    AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.

  • 48 bundled files

    Scripts, templates, and references the model can read while it works. Files are read-only and never executed.

  • Open source

    Published by jiushiwon on GitHub. Read the source before you install it.

Installation

Install the Frontend Ui Foundry AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

1

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

  1. Open the app and go to Plugins → Skills.
  2. Choose "Install from GitHub".
  3. Paste the skill folder URL below and confirm.
    https://github.com/jiushiwon/wg-skills/tree/main/vibeCoding/frontend/frontend-ui-foundry
  4. Enable the skill in any chat where you want it available.
Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.
2

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills
git clone --depth 1 https://github.com/jiushiwon/wg-skills.git /tmp/wg-skills
mkdir -p .claude/skills
cp -r /tmp/wg-skills/vibeCoding/frontend/frontend-ui-foundry .claude/skills/frontend-ui-foundry
Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable Frontend Ui Foundry in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads Frontend Ui Foundry on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so Frontend Ui Foundry is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

  • Loaded only when it is needed

    The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.

  • Switch models mid-chat

    Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

Frontend UI Foundry

综合性前端 UI 技能：按场景生成、一键优化、Token 统一、品牌套用、设计审查六位一体。

设计哲学

  • 场景驱动：不同场景（移动端/PC/管理端/营销页/文档/金融/原生/3D）有截然不同的布局、组件、交互基线
  • Token 优先：所有视觉决策沉淀为可消费的设计 Token，颜色/字体/间距/圆角/阴影/动效一应俱全
  • 双模式闭环：forge 从零生成，optimize 智能重构现有项目
  • 复用协同：直接引用 impeccable 的设计法则、ui-ux-pro-max 的规则库、ui-audit 的决策框架
  • 多栈适配：HTML+Tailwind、React+Next、Vue+Nuxt、uniapp、RN、Svelte 六栈统一体验

子命令

命令类别用途详细
forge <scenario>生成从零按场景生成页面或项目commands/forge.md
optimize [target]优化一键智能重构现有项目commands/optimize.md
tokens <action>Token提取/注入/导出设计 Tokencommands/tokens.md
unify [target]统一多页面/多模块风格统一commands/unify.md
audit [target]审查设计 + 代码双维审查commands/audit.md
brand <name>品牌套用品牌风格到目标commands/brand.md
scenario <type>场景输出场景方案基线commands/scenario.md
stack <name>技术栈技术栈最佳实践commands/stack.md

路由规则

  1. 无参数 → 渲染子命令菜单 + 场景选择器，引导用户选择
  2. 首词匹配子命令 → 加载对应 references/commands/<cmd>.md 并按其流程执行
  3. 首词不匹配 → 视为通用设计请求，按"识别场景 → 选择风格 → 加载 Token → 实施"主流程

主流程（首词不匹配时）

1. 识别场景（mobile-responsive / pc-corporate / admin-dashboard / landing-marketing / docs-site / fintech-app / mobile-native / threejs-3d）
2. 选择风格（brand 名称 / 调色板 / 用户自描述）
3. 选择技术栈（html-tailwind / react-nextjs / vue-nuxt / uniapp / react-native / svelte）
4. 加载 references/tokens/ 对应 Token
5. 加载 references/scenarios/<scenario>.md 场景基线
6. 应用设计法则（OKLCH 调色策略、字号阶 ≥1.25、行长 65-75ch、AI slop 黑名单）
7. 输出代码 + Token 文件 + 报告

核心资源

设计 Token（6 份）

类别文件
调色板tokens/color-palettes.md
字体配对tokens/typography.md
间距阶梯tokens/spacing-scale.md
圆角阴影tokens/radius-elevation.md
动效tokens/motion.md
布局栅格tokens/layout-grid.md

场景库（8 个）

场景文件典型用途
移动端响应式scenarios/mobile-responsive.md响应式 Web
PC 企业官网scenarios/pc-corporate.md企业品牌站
管理端中后台scenarios/admin-dashboard.mdSaaS 后台
营销落地页scenarios/landing-marketing.md推广页
文档站点scenarios/docs-site.md帮助中心
金融应用scenarios/fintech-app.md银行/支付
原生移动scenarios/mobile-native.mdiOS/Android
3D 沉浸scenarios/threejs-3d.mdWebGL/Three.js

品牌风格（58 总览 + 10 详细）

brands/index.md 列出 58 个品牌，10 个详细卡见 brands/。

技术栈（6 个）

stacks/ 目录下六栈适配。

AI Slop 黑名单

详见 anti-patterns.md。生成与优化前必读。

关键设计法则（精简版）

完整版见 impeccable 设计法则 skill（外部依赖，未纳入本仓库；用户可在 Anthropic / 社区获取），本 SKILL 必读要点：

调色策略

  • 使用 OKLCH，减少极亮/极暗的 chroma
  • 永不使用 #000 或 #fff，所有中性色向品牌色相微调（chroma 0.005–0.01）
  • 四档承诺度：Restrained（点缀 ≤10%）/ Committed（主色占 30–60%）/ Full（3-4 角色明确分工）/ Drenched（整个表面就是色）

主题判断

  • 不预设深/浅色。先写一句"谁、哪、什么光、什么心情"的物理场景句，句子里推不出答案就改具体直到能推

字体

  • 正文行长 65-75ch
  • 字号阶 ≥1.25 比例
  • 不用 Inter/Roboto/Arial（AI slop 标志）

布局

  • 卡片不是万灵药，嵌套卡片必错
  • 不强求包容器，大多数元素不需要
  • 间距要有节奏，避免处处相同

动效

  • 不动 CSS 布局属性
  • ease-out 指数曲线，无 bounce/elastic
  • 150-300ms 微交互，复杂 ≤400ms

绝对禁令

  • 侧边色条边框（border-left/right > 1px 彩色强调）
  • 渐变文字（background-clip: text）
  • 玻璃拟态作默认
  • 大数字+小标签的 hero-metric 模板
  • 尺寸一致的卡片网格
  • 模态框作为第一反应

AI Slop 测试

如果有人看了这个界面说"AI 做的"而你无法反驳，就是失败。先做品类反思维（不能从品类直接猜出主题+调色板），再做二阶反思维（不能从品类+反参考猜出美学家族）。

验证提醒

修改现有项目时：

  1. 不破坏业务逻辑：props、event、router、state、API 调用保持不变
  2. 不破坏可访问性：对比度 ≥4.5:1（AA），触摸目标 ≥44pt
  3. 不引入 AI slop：对照 anti-patterns.md 自检
  4. 保留动画意图：prefers-reduced-motion 必须支持
  5. 提供回滚方案：optimize 模式必须输出 diff + 回滚脚本

默认决策

  • 默认调色板：赤琥金（中国科技+文学审美）
  • optimize 默认策略：渐进（80% 对齐到匹配品牌）
  • 生成语言：中文
  • 目标部署位置：D:\frontend-skills\frontend-ui-foundry\

开始使用

  • 想生成页面/项目：forge <scenario> 或 forge <scenario> --brand <name> --stack <name>
  • 想优化现有项目：optimize 或 optimize <path>
  • 想看可用调色板：tokens color 或读 tokens/color-palettes.md
  • 想套用品牌风格：brand <name> 后跟目标
  • 想审查项目：audit <path>
  • 没参数：渲染上方子命令菜单，引导用户选择

触发词

frontend-ui-foundry、Frontend UI Foundry

Bundled files

The model reads these on demand while the skill is loaded. They are exposed as readable files and are never executed.

Frequently asked questions

What does the Frontend Ui Foundry AI skill do?

Use when generating UI for a specific scenario (mobile/PC/官网/管理端/营销页/文档/金融/原生/3D), when refactoring an existing HTML/Vue/React project to a unified design system, when extracting design tokens from code, when applying a brand style, or when auditing a frontend project for design and code quality. Covers 8 scenarios, 10 mainstream color palettes, 15 font pairings, 4pt spacing scale, OKLCH color strategy, and 6 tech stacks (HTML+Tailwind/React+Next/Vue+Nuxt/uniapp/RN/Svelte).

Why use Frontend Ui Foundry on TypingMind?

Because you install it once and use it with any model. Frontend Ui Foundry is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Frontend Ui Foundry in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/jiushiwon/wg-skills/tree/main/vibeCoding/frontend/frontend-ui-foundry. TypingMind reads its SKILL.md and bundles its files and installs it as a skill you can enable per chat.

Which AI models can use Frontend Ui Foundry?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Frontend Ui Foundry?

As many as you like. As long as a model supports skills, you can use Frontend Ui Foundry with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Frontend Ui Foundry AI skill free?

Yes. It is published on GitHub by jiushiwon under the Apache-2.0 license. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

Related AI Skills

View all
NousResearch logo

Auteur

NousResearch
OrganizationPopular

Design and build cinematic, award-level web pages.

53.5K
250.4K
25 files
View
NousResearch logo

Concept Diagrams

NousResearch
OrganizationPopular

Generate flat, minimal educational SVG visuals as HTML.

53.5K
250.4K
19 files
View
NousResearch logo

Hyperframes

NousResearch
OrganizationPopular

Render MP4/WebM videos from HTML compositions.

53.5K
250.4K
7 files
View
NousResearch logo

Ip As Logo

NousResearch
OrganizationPopular

Design minimal cute IP mascot marks readable at 32px.

53.5K
250.4K
Instructions
View

Set up your own AI workspace now

Get notified about new features and future giveaways by subscribing to our newsletter 👇