搜索结果 设计系统
设计系统 贴吧
一个关键词就是一个贴吧，路径全站唯一。
用户
未找到
包含 设计系统 的推特
🚀重大好消息，Vercel 把他们的设计系统直接开源了，两个地址：
里面写着颜色 token、字体规格、间距、圆角、组件、动效、甚至文案规范，全部写死了具体数值。
这套设计系统的核心逻辑是什么。
它的美学只有一个原则：颜色是用来传达信息的，而非装饰。
快去试试完善自己业务的品牌设计系统吧。
显示更多
#AI#
我自己 vibe coding 的感受是 gpt5.4 设计系统框架的能力，远远强于 opus4.6。让他们自行对比彼此方案，opus 也认输。
所以目前是 gpt5.4 出方案和文档，opus 来写。
不过最近 timeline 经常刷到 codex 工程能力也更强... 那 Claude 岂不是没优势了？
显示更多
看到设计好看的网站，想扒它的配色字号间距，打开开发者工具一个个元素找，耗时耗力。
于是用 designlang，只需要一条命令，就能获得 17 个以上的界面设计文件。
包括 Tailwind 配置、Figma 变量、shadcn 主题、甚至给 v0 或 Cursor 用的提示词也有。
GitHub：
不止颜色字体，四个断点下的响应式表现、悬停点击状态、无障碍对比度都会测，还能给整站的设计一致性打分。
提供演示 Demo 尝试，贴个网址就能看着设计系统从页面里一点点被读出来，过程有录像还能分享给别人。
想学别人家的设计语言，或者给老项目补一份设计规范的，比手动扒省事太多。
显示更多
《一个系统如何在自身内部产生一个关于自身和外部的有效模型？》
人类最深的问题之一是：
为什么宇宙中的一部分物质，能够认识宇宙？
一块石头、一个细菌、一个人的大脑，本质上都由相同的物质组成。但它们之间存在巨大差异：
石头只是响应环境。
生命开始维持自身。
大脑开始预测环境。
人类甚至建立了关于宇宙运行规律的数学模型。
那么，一个系统究竟如何在自身内部产生一个关于自身和外部的有效模型？
⸻
一、模型不是复制世界，而是压缩世界
最直观的误解是：
认为认知就是把外部世界复制到内部。
但任何有限系统都无法做到这一点。
宇宙的信息量无限复杂，一个生命体不可能保存所有细节。
所以系统必须进行压缩。
一棵树，在现实中包含：
数十亿个细胞；
无数化学反应；
每个分子的运动。
但人的大脑只需要形成：
“树会生长，需要水，可以遮阴，可以结果。”
这个模型已经足够指导行动。
因此：
模型不是现实的复制品，而是现实中具有预测价值结构的压缩表达。
⸻
二、模型产生的起点：系统与环境发生耦合
一个完全孤立的系统，不需要模型。
因为没有外部变化影响它。
模型产生的第一步，是系统和环境之间建立稳定关联。
例如最简单的生命：
细菌没有眼睛，没有大脑，但它能够感知化学物质。
附近出现营养：
向那里移动。
出现有害物质：
避开。
它并不知道“世界是什么”。
但它已经形成了一种最原始的模型：
某些外部变化，会影响我的未来状态。
⸻
三、模型来自反馈筛选，而非提前设计
系统如何知道哪些信息重要？
它并不知道。
它通过反馈不断筛选。
某些内部结构：
能够更好地预测环境，于是提高生存概率。
另一些结构：
预测失败，逐渐消失。
经过长期演化：
留下来的不是“最复杂”的模型，而是“最有效”的模型。
因此：
模型的形成，本质上是环境对系统内部结构的长期筛选。
⸻
四、真正的突破：系统开始模拟未来
简单系统：
刺激 → 反应。
复杂系统：
刺激 → 内部模型 → 预测 → 行动。
这是认知诞生的关键。
例如：
动物看到乌云。
它不需要等雨落下来才行动。
它的大脑已经建立：
乌云 → 降雨 → 需要躲避
这样的内部模拟。
系统开始不直接面对世界，而是通过内部模型面对世界。
⸻
五、模型为什么能够接近真实？
这里存在一个核心问题：
系统永远只能接触自己的内部信号。
它如何知道自己的模型对应真实世界？
答案是：
靠持续反馈，以及主动制造反事实。
低级生命只需要：
“这个模型能不能让我活下来。”
而科学进一步要求：
“这个模型在不同条件下是否仍然成立。”
例如：
过去人类认为太阳围绕地球运动。
这个模型在日常经验中有效。
但通过更大尺度的观测和计算，它无法解释更多现象。
于是被新的模型替代。
科学的本质，就是不断寻找：
跨尺度、跨环境仍然成立的高价值结构。
⸻
六、从CPV看：智能就是寻找高价值压缩
世界本身是高维的。
任何系统都无法处理全部信息。
因此智能的核心能力，不是拥有更多信息，而是找到：
哪些信息最值得保留。
比如一个人的完整状态极其复杂。
但预测他的行为，可能只需要：
价值观；
目标；
能力；
当前约束。
这些变量，就是高价值信息。
CPV关注的正是：
一个系统如何从巨大状态空间中，提取能够支撑未来预测的关键变量。
⸻
七、认知不是宇宙之外的东西
更深的问题是：
如果观察者本身来自宇宙，那么观察者如何产生模型？
答案是：
观察者并非突然出现。
它是一个连续演化过程：
物质形成稳定结构；
稳定结构形成自组织系统；
自组织系统维持自身；
生命开始区分自己与环境；
神经系统开始预测未来；
智能系统开始建立抽象模型。
⸻
所以，认知不是外加于物质的特殊能力。
它是物质在复杂演化中形成的一种新状态：
系统开始在自身内部构造一个关于世界的低维模型，并利用这个模型改变自身未来。
⸻
八、最终答案
一个系统如何在自身内部产生一个关于自身和外部的有效模型？
因为：
一个能够维持自身存在的系统，必须与环境建立耦合；在反馈中筛选有效结构；通过压缩提取关键变量；最终形成能够预测未来的内部模型。
从这个角度看：
生命，是物质开始维护自身。
智能，是系统开始预测未来。
科学，是智能开始寻找世界中更深层的不变量。
而认知的本质，就是：
一个有限系统，在无限复杂的现实中，寻找那些能够连接过去、现在与未来的结构。
显示更多
你用 Figma，你的设计稿在 Figma 的服务器上，你的设计系统在 Figma 的服务器上，随时可以被涨价、被迁移、被断供——Penpot，56800 个 Star，把这整件事颠覆了。
一句话：开源的 Figma，可以部署在你自己的服务器上，数据完全归你，设计直接出 SVG/CSS/HTML 代码。
为什么值得认真看一下：
（1）设计即代码——做好的稿子，切换到 Inspect 模式，右边直接出 CSS、SVG、HTML，开发不用再猜间距、颜色、字号，直接复制用
（2）Design Tokens 原生内置——不是插件，是核心功能。颜色、字体、间距统一管理，设计改一个地方，前端的变量跟着变，不用再手动对稿子
（3）自带 MCP Server——AI 可以直接读你的设计文件、帮你生成代码、做设计审查，接进 Claude Code 就能用
（4）CSS Grid 和 Flex 布局——在设计稿里直接做响应式，不是画死的，做出来的布局和前端写的代码逻辑一样
（5）完全自托管——Docker 几条命令跑起来，数据在你自己机器上，合规、安全、不依赖任何第三方
浏览器直接用不用装任何东西，也可以自己部署。设计工具里少见的真正开源。
用 AI 做产品、跑设计系统、或者在意数据主权的兄弟，这个值得装一个试试。
好东西转给需要的兄弟。🚀
#开源工具# #AI设计# #老杨啊分享#
显示更多
推荐 @MengTo 为设计师和开发者们开源的 Skills
MengTo 是 @designcodeio 和 创始人，在设计和开发结合方面有非常深的积累，他的分享必须关注起来，这个开源项目把设计指令、工作流、风格系统、抓取与调试经验都沉淀成了「四大类、75 个 Skills」
1. Codex workflows - 10 个
可复用的 Agent 操作流程（抓取、转 prompt、性能剖析、内容生产）
video-to-superprompt、stitched-full-page-capture、html-to-interaction-prompts、daily-ui-inspiration-capture、optimize-web-animations、performance-profiling
2. Media - 2 个
按用途/裁切/比例挑选高质量图片素材
aura-asset-images、unsplash-asset-images
3. UI - 1 个
“像设计系统一样写 prompt”的方法论
design-first-ui-prompting
4. Web design - 62 个
落地页结构、动效系统、WebGL/3D、CSS 处理、布局系统、视觉风格
landing-page、pricing-page、gsap、threejs、tailwindcss、animation-on-scroll、globe-gl、cobejs、vantajs、progressive-blur、css-border-gradient、各种 dark/glass/skeuomorphic 风格包 ...
旗舰工作流：从参考视频到一键 HTML
1. video-to-superprompt —— 输入一段参考视频（设计稿/落地页/动画录屏），用 ffprobe+ffmpeg 抽帧，按“故事 / 布局 / 运动 / 视觉 / 技术重建 / 可访问性”六层分析，输出一个长到不看原视频也能重建的 paste-ready prompt，明确点名 GSAP ScrollTrigger、Lenis、Three.js、video.currentTime scrubbing 等具体机制。
2. html-to-interaction-prompts —— 把已有 HTML 页面（如 Aura Build 产物）拆成“单段/单动画/单按钮/单 hover/单 WebGL 效果”的可复用 prompt 文章。
3. stitched-full-page-capture —— 解决 Framer 等懒加载/滚动动画站点 fullPage 截图发白的痛点：滚动预热 → 视口分步截图 → 垂直拼接 → 用拼接图重切 section crop，并写回 manifest。配套 Playwright + ffmpeg 脚本。
4. daily-ui-inspiration-capture —— 把“浏览 + 抓取 + 参考研究 + prompt 生成”组合成每日自动循环，产出 prompt pack。
两个值得细读的 Skill 范式
1. design-first-ui-prompting 给出了一套固定 prompt 骨架：GOAL → FORMAT → LAYOUT → TYPE SYSTEM → COLOR+MATERIAL → IMAGERY → COPY → CONSTRAINTS → NEGATIVE PROMPT，并强调三个关键技巧：
· “Variants > rerolls”：先锁定布局+层级+文案，再每次只改一个变量（角度/强调色/卡片排布/背景调子）。
· 2-pass 字体工作流：模型常拼错字时，先无字生成留出文字安全区，再回 Figma 排版。
· Constraints card：用 FONT / STYLE / MODE 三行小面板像 mini style guide 一样锚定输出。
2. landing-page 则示范了一个“设计 + 转化 + SEO”三合一 SOP：先收集页面目的/受众/证据/约束，再给核心结构（首屏 5 要素 → 中段论证 → 底部异议处理），列出 4 种布局选型、6 条高转化策略、headline/CTA 文案模板、逐节迭代顺序、SEO/AEO 清单和常见坑——典型地体现了“Skill = 操作规程”的写法。
显示更多
想参考某个网站的设计风格，配色、字体、间距一个个手动扒太费劲。
dembrandt 给一个网址，几秒钟把整套设计系统提取出来，配色、字体、间距、阴影都在。
还能一键生成品牌指南，或者导出成设计工具能直接用的标准格式。
GitHub：
支持当 MCP 服务器接入 Claude Code 或 Codex，让 Agent 直接读取目标网站的设计规范来干活。
做前端或设计的朋友，参考竞品设计系统时能省不少手工活。
显示更多
在小红书上看到设计师们讨论“Figma 2 Code 怎么弄效果最好”
都上 AI 了，就别困在一亩三分地了，直接用 tailwind 验收设计系统，用 storybook 验收 组件、布局 ，留着 Figma 这个中间环节干嘛
显示更多
Facebook 最近开源了一套在 Meta 内部用了 8 年的设计系统：Astryx。
这套系统撑起过公司内部 13000 多个应用，内置 150 多个可无障碍访问的组件。
还带品牌主题、暗色模式和现成模板，样式基于 StyleX，但用起来不用额外装样式库。 组件可以在任意层级拆开重组，需要更深定制时，还能把某个组件的完整源码导出到项目里自己接手。
GitHub：
主题只是一组 CSS 变量的覆盖，设计师改起来不用去 fork 或包一层组件源码。
文档、API 和 CLI 按同一套约定设计，人和 AI 助手看的是同一份参考。 适合想要一套开箱即用、又能自由改皮肤的设计系统的前端团队，尤其是也在用 AI 辅助写界面的场景。
显示更多
Facebook 最近开源了一套在 Meta 内部用了 8 年的设计系统：Astryx。
这套系统撑起过公司内部 13000 多个应用，内置 150 多个可无障碍访问的组件。
还带品牌主题、暗色模式和现成模板，样式基于 StyleX，但用起来不用额外装样式库。
组件可以在任意层级拆开重组，需要更深定制时，还能把某个组件的完整源码导出到项目里自己接手。
GitHub：
主题只是一组 CSS 变量的覆盖，设计师改起来不用去 fork 或包一层组件源码。
文档、API 和 CLI 按同一套约定设计，人和 AI 助手看的是同一份参考。
适合想要一套开箱即用、又能自由改皮肤的设计系统的前端团队，尤其是也在用 AI 辅助写界面的场景。
显示更多
