标签 Design 下的文章

App Open-Design 让智能体按你的设计规范出图
项目
一、项目介绍 设计师和前端之间那道鸿沟，AI 并没有自动填平。设计师说的是" Linear 那种冷调极简风"，AI 出来的是又一个千篇一律的紫色渐变；再好的模型，也得先知道你的设计系统长什么样。 Open-Design 定位为协作式 AI 设计代理工作台，本地优先、开源。它的思路是：让设计规范成为可被 Agent 读取的项目文件，再让 Agent 按规范产出设计稿与页面。仓库提供 DESIGN.md 这样的约定文件，以及可直接使用的功能技能与设计模板，Agent 会把它们与你...
Skill AI-Design-Skills 让AI coding工具输出反套路的官方设计技能
项目
一、项目介绍 让 AI 写代码已经不稀奇，但让它“写出好看又不套路”的界面，几乎每次都翻车：配色发灰、间距随机、按钮像模板生成、移动端一塌糊涂。问题不在模型，而在于你没给它任何设计约束，它只能抄训练集里最常见的“AI 味”版面。 AI Design Skills 是一组给 AI 编码工具（Claude Code、Cursor、Codex、Windsurf 等）用的设计技能。每个技能是自包含的文件夹，教 Agent 怎么从零搭落地页、怎么建立一套完整的视觉系统（字体、间距、圆角...
Library zag 框架无关的 Headless 组件状态机库
项目
一个交互组件（如开关组、折叠面板）往往要在 React、Vue、Solid 多个框架里重复实现一遍行为逻辑，而真正难的是键盘操作和焦点管理。每换一个框架就重写一次，既浪费又容易出无障碍 bug。 Zag 用有限状态机（XState 思路）描述组件行为，再把『适配器』接到不同框架上。你写标记和样式，Zag 保证键盘导航、焦点与 ARIA 行为在各框架间一致。
Library reka-ui Vue 无障碍 Headless UI 组件库
项目
用 Vue 写复杂交互组件（弹窗、下拉、日期选择器）时，最麻烦的不是样式，而是键盘导航、焦点管理和 ARIA 属性这些无障碍细节。自己实现容易漏掉大量边界情况，导致组件对屏幕阅读器不友好。 reka-ui（前身是社区知名的 Radix Vue）提供一套无样式（headless）的可访问组件原语。你只管写标记和样式，它负责所有交互行为与无障碍逻辑，让你在 Vue 里也能享受 Radix 级别的组件质量。
MCP Figma-Context-MCP 让AI读取Figma设计稿实现UI
项目
设计稿和代码之间，永远隔着一道「翻译」。设计师在 Figma 里画好界面，前端拿到截图照着写，误差、返工、来回确认是常态。Figma-Context-MCP（Framelink）直接把这道墙拆了：它是一个 MCP 服务，让 Cursor、Windsurf 这类 AI 编码工具能直接读取 Figma 文件的布局与样式信息，把设计数据变成结构化上下文喂给模型，从而「一次成型」地写出还原度很高的 UI 代码，比贴截图准确得多。
Rust OpenPencil 开源AI原生矢量设计工具支持智能体协同
项目
设计工具市场被 Figma 统治了十年，但 AI 时代的设计流程和它假设的完全不同：你不再是拖拽图层的人，而是用自然语言描述需求、让智能体去画。可市面上的 AI 设计工具要么是闭源服务，要么只是在图片生成上套了个壳——真正的矢量编辑、多人协同、代码导出，开源世界里一直是空白。 OpenPencil 自称世界上第一个开源的 AI 原生矢量设计工具：提示词直接上画布、多个智能体并发出图、设计文件就是 JSON、内置 MCP 服务器可以被任何编程智能体调用。项目用 Rust 写核心...
Skill Huashu-Design 一句话生成可交付设计的智能体技能
项目
AI 生成的设计稿有个通病：乍一看挺唬人，细看全是「AI 味」——配色随意、版式平庸、图标风格混乱，放进正式场合总觉得拿不出手。找个设计师做一套发布物料，报价和时间都不便宜；自己用 Figma 硬磨，又没有那个审美积累。 花叔的 huashu-design 换了个思路：不让 AI「画设计」，而是给智能体装一套完整的设计方法论——84 种带真实样张的风格库、从真实作品找参照、交付前做设计体检——让它在 Claude Code、Cursor 这类智能体里跑完整流程，产出能直接交付...
Skill Taste-Skill 教会AI编程助手真实设计品味的技能
项目
让 Claude Code 或 Cursor 做一个落地页，十次有八次你会得到同一套东西：紫色渐变背景、三栏特性卡片、居中大标题，字体永远是 Inter。模板没错，但千篇一律，一眼就能看出是 AI 做的。设计感这种东西很难用一句提示词描述清楚，写「要好看」等于什么都没写，写「参考某某网站」智能体又不一定真能看懂。 Taste Skill 的做法是把这个难题拆成可执行的流程：先给智能体一套从 247 个精选网站里提炼出来的艺术方向库，再让它去公开图库找真实照片素材，最后逼它打开...
App Webstudio 开源可视化建站与Webflow替代
项目
做网站的人常在两个极端间摇摆：要么手写代码、灵活但慢；要么用闭源建站平台、快却把数据和锁定一起交给别人。Webstudio 想给第三种选择——开源的视觉化建站工具，你拥有数据、组件与基础设施，还能导出干净的代码。 Webstudio 是一个开源的可视化开发平台，定位是 Webflow 的开源替代。它面向开发者、设计师和跨职能团队，支持所有 CSS 属性、可对接任意 headless CMS，并能托管到任何地方。
App Builder 开源低代码可视化建站工具带AI助手
项目
做个官网、落地页、活动页，前端开发者的常态是：设计稿在 Figma 里，开发在编辑器里，两边来回倒腾；好不容易写完，客户说「这个按钮换成那个色块」，又是一轮改代码、重新部署。低代码建站工具不是没有，但大多两个极端——要么封装得太死，导出物臃肿、定制无门；要么就是玩具，做不了生产站点。Frappe Builder 是少见的中间路线：一个开源的现代化可视化建站工具，画布操作像 Figma，产物却是干净的 Web 页面，官方强调「不往页面里塞多余脚本」，并内置 CMS 和一键发布。...
Framework Impeccable 用 62 条规则矫正 AI 设计的通病
项目
同一个模型，换个提示词，前端页面却总是那么眼熟：Arial 或 Inter 当万能字体、灰字压在彩色块上、纯黑纯灰从不加 tint、卡片里套卡片、弹性缓动动效显得廉价。这不是你的问题，是几乎所有编码代理都在同一批 SaaS 模板上训练出来的“肌肉记忆”。Anthropic 的 frontend-design 技能是第一个被广泛使用的设计技能，Impeccable 从它出发，把“反 AI 设计腔”做成了一套可量化、可自动检查的系统。 Impeccable 由 Paul Baka...
Skill Hallmark 让 AI 生成的前端摆脱模板味
项目
用 Claude Code、Cursor 或 Codex 生成一整个落地页，十次里有八次长一个样：Inter 字体、紫到蓝的渐变、卡片套卡片、灰色文字压在彩色块上、标题上方永远顶着一个小圆角图标。模型都在同一批 SaaS 模板上训练过，你不加约束，它只会复读那些“看起来高级但其实空洞”的套路。更糟的是，这些页面还常常带着 AI 味儿——每个标题下面一句 eyebrow、一个彩色关键词、页面末尾雷打不动的邮箱订阅框。 Hallmark 是 Together AI（仓库挂在 Nu...
Library impeccable 用62条确定性规则给AI前端设计去机味
项目
AI 帮你写前端，十次有八次会长得像一个模子刻出来的：字体永远 Inter，配色永远紫到蓝渐变，灰色文字压在彩色背景上，圆角方块图标贴在 every 标题上方，卡片里还套卡片。模型都在同一批 SaaS 模板上训练，你不给硬约束，每个项目都会复刻这些「tell」。Anthropic 的 frontend-design skill 是第一个被广泛用的设计 skill，而 Impeccable 从它起步，把它做成了一套更系统、可量化、还能在浏览器里实时迭代的方案。 Impeccab...
Skill hallmark 给AI设计加底线拒绝千篇一律的机味页面
项目
用 AI 写前端页面，最大的尴尬不是做不出来，而是做出来「一眼机味」：千篇一律的 Inter 字体、紫到蓝的渐变、卡片套卡片、灰色文字压在彩色背景上、每个标题上方都顶着一个小眼睛图标。这些「AI slop」告诉别人这页是机器生成的，专业感瞬间归零。更麻烦的是，模型都训练在同一批 SaaS 模板上，你不加约束，每个项目都会长出同样的那几个 tell。 Hallmark 是 Together AI 出品的一个设计 skill，专门给 Claude Code、Codex、Curso...