外观
光谱将一个Figma组件变成一个紧凑的,有计划有效的规格——然后将该规格变成工作代码,Figma画布文档,分析报告,以及一个版本化的关于组件如何变化的记录. 一个Figma插件和一个命令行接口产生相同的输出,来自相同的schema.
跨变体的样式和分层评价是一个不同的问题,而不是一个判断召唤,所以一个脚本在零AI符号的每个组件约一秒内完成. 一个刻意省略的特征——行为,无障碍细微,运动,命名口味——就是代理商和工程师都很好的地方,而下游的工作就是在他们可以信任的记录下发生的.
记录是重点。 当法格玛,代理,工程师,和CI都从同一个谱来读取时,改变不再是一种交接,开始是一种同步.
打开插件 • 妇女 建立CLI系统 • 妇女 探索计划 • 妇女 文档
背景读取: 作为数据的组成部分 • 妇女 光谱驱动的UI组件开发
生态系统
CLI 为您安装一些依赖和私有的变换软件包(但不是故事本,而是您这样做); 插件编译 specs-from-figma 财务报告和审定财务报表 figma-from-specs 从源.
| 表面 | 这是什么 | 它的栖息地点 |
|---|---|---|
| 外观 | Figma 插件 — 画布上的相片, 文档上的相片数据 | Figma社区 |
@directededges/specs-cli | 18个命令 运行生态系统和源 分析,版本,cs,故事本,测试 | packages/cli/ |
@directededges/specs-schema | 合同——TypeScript类型和JSON Schema | packages/schema/ |
| 文件网站 | ~150页 | 来源于 site/ |
@directededges/specs-from-figma | 变形图像 ~ spec, 有插件 API 和 REST 运行时间 | 私人,出版至npm |
@directededges/react-from-specs | 变相光谱 反应 | 私人,出版至npm |
@directededges/webcomponents-from-specs | 变相 spec ~ Web 组件( Lit) | 私人,出版至npm |
@directededges/figma-from-specs | 变形光谱 — 图片画布 | 私人,出版至npm |
from-specs | 为发射者共享光谱读取核心 | 私人,从未出版 |
为什么要计算推论?
| 外观 | 代理图像提取 | |
|---|---|---|
| 速度 | 每个组件~1秒(CLI)/~10秒(插值) | 每个组件~5-10分钟 |
| 人工智能费用 | 脚本——每个组件0个令牌 | 25/50/100 000+每个部分的纪念品 |
| 可重复性 | 决定和机械 | 推论错误、漏洞和过度自信 |
| 产出 | Schema-valid YAML/MD,可供测试和版本 | 无结构的Markdown, 无法预测的校验 |
| 平台 | 基于司马和跨平台 | 猜猜你的意图 |
Schema: Specs 记录的内容
@directededges/specs-schema 这是合同。 TypeScript类型和JSON Schema在任何时候都描述了相同的结构,软件包没有逻辑,CLI和Figma插件都消耗它而不是定义自己的形状. 一个小分点说明一个部件的每个分层和财产,在各种变体中都是一致的.
npm install @directededges/specs-schema
| 编 | 类型 | 赞成 |
|---|---|---|
| 构成部分 | Component, (中文(简体) ), Variant, (中文(简体) ), Variants, (中文(简体) ), Metadata, (中文(简体) ), RunMetadata,相关文件 | |
| 解剖学 | Anatomy, (中文(简体) ), AnatomyElement, (中文(简体) ), ElementTypeRef, (中文(简体) ), RoleConceptName, (中文(简体) ), ActionEntry | |
| 道具 | Props, (中文(简体) ), BooleanProp, (中文(简体) ), StringProp, (中文(简体) ), EnumProp, (中文(简体) ), SlotProp, (中文(简体) ), NumberProp, (中文(简体) ), PropConfigurations | |
| 要件 | Element, (中文(简体) ), Elements, (中文(简体) ), ElementType, (中文(简体) ), ElementExtensions | |
| 版式 | Layout, (中文(简体) ), LayoutNode, (中文(简体) ), Sides, (中文(简体) ), Corners, (中文(简体) ), Position, (中文(简体) ), ItemSpacing | |
| 样式 | Styles, (中文(简体) ), Style, (中文(简体) ), ColorStyle, (中文(简体) ), Typography, (中文(简体) ), Effects, (中文(简体) ), GradientValue, (中文(简体) ), TokenReference | TokenReference |
| 图像 | ImageValue, (中文(简体) ), ImageData, (中文(简体) ), ImageProp, (中文(简体) ), ImageBinding, (中文(简体) ), ObjectFit | |
| 槽数 | Children, (中文(简体) ), SlotBinding, (中文(简体) ), SlotContent, (中文(简体) ), SlotContentRef, (中文(简体) ), Composition | 全部 |
| 约束 | PropBinding, (中文(简体) ), Conditional, (中文(简体) ), ConditionExpression | PropBinding |
| 子组件 | Subcomponent, (中文(简体) ), Subcomponents, (中文(简体) ), SubcomponentSource | 全部 |
| 实例 | InstanceExample, (中文(简体) ), InstanceExamples | 全部 |
| 资产 | GlyphStructure, (中文(简体) ), GlyphStructureNode | |
| 公约 | Conventions, (中文(简体) ), PlatformConventions, (中文(简体) ), SpecsConventions, (中文(简体) ), ValueConvention | |
| 设置 | Settings, (中文(简体) ), ResolvedSettings, (中文(简体) ), ColorFormat, (中文(简体) ), SourceEntry |
出口只有类型,但两个运行时常数, DEFAULT_CONVENTIONS 财务报告和审定财务报表 DEFAULT_SETTINGS。 。 。 . 杰森·斯克马 5个可找到的分道通航道—— component, (中文(简体) ), concern, (中文(简体) ), metadata, (中文(简体) ), conventions, (中文(简体) ), settings - 与 类型脚本。每个类型下都有一页 司马,以及 CONSTITUTION.md 管理什么可能改变以及如何改变.
进一步读作: 构成部分合同和计划。 。 。 .
决定记录
提议对方案进行修改,并通过建筑决策记录进行跟踪 adr/。每个都记录上下文、所考虑的选项和决定;接受的发展成果评估自动向文件网站发布.
欢迎捐款。 切开还原器,运行 npm install ,并使用 npm run build 财务报告和审定财务报表 npm test 以验证更改。 所有软件包都使用带有全局功能的Vitest. Claude Code号飞船的全ADR寿命周期技能:
| 技能 | 目的 |
|---|---|
/specs.adr.create | 起草新的ADR, 提出下一个编号, 并保留在索引中 |
/specs.adr.implement | 在类型、计划、测试和更改日志中应用 ADR 类型和计划变化 |
/specs.adr.accept | 验证执行情况,标明已接受的发展成果评估并更新索引 |
建立工作空间
同一工作空间的两条路径。 另一个版本也不是更小的版本——CLI是第一个命令行工具,代理路径驱动这些相同的命令.
按命令指挥后续 开始数字 :
npm install -g @directededges/specs-cli
specs init # write config/conventions/<platform>.yaml and config/settings.yaml
# add your Figma file key to config/settings.yaml, and FIGMA_TOKEN to .env
specs fetch # pull the file, variables, and styles
specs scan # write the manifest, then tick the components you want
specs build # generate, analyze, emit every platform, publish Storybook — once
第一个 build 发布每个平台, 因为还没有人说。 它所创造出的那些树,就是站着的答案:删除 webcomponents/ 然后在那里停止排放。 明确命名步骤—— --only react - 也算作别的意思.
和经纪人在一起,三个步骤:
npm install -g @directededges/specs-cli
specs skills install # writes the procedures into .claude/skills/
然后告诉克洛德代码:
Follow the specs-cli.workspace.setup skill to set up a Spectacular workspace here.
它处理安装,配置,令牌设置,取来,校正,第一个构建,以及运行的"故事本"——两次停止:一次是哪个组件到 spec,一次是哪个图标,状态和角色通过运行. 唯一的先决条件是Node 20.19+,一个Figma文件URL,和一个Figma个人访问符.
图标
二令所行所行所行所行相顺. 其余的都是他们跑的步子,每个步子都读到它之前写的.
data/ ──► data/<alias>.manifest.md ──► specs/ ──┬──► react/src/
▲ ▲ ├──► webcomponents/src/
│ │ └──► storybook/content/
specs fetch you tick the boxes
Exp 标记实验命令——可以使用,但其旗帜和输出仍然可能改变.
整个工作空间
| 命令 | 它会做什么 | 级别 | |
|---|---|---|---|
specs build | 使工作空间更新一次, 然后用链条的代码退出—— CI 形状 | 免费 | 过期 |
specs run | 同样的,然后看规格,数据, 配置和重做只影响什么 | 免费 | 过期 |
设置
| 命令 | 它会做什么 | 级别 | |
|---|---|---|---|
specs init | 写入 config/conventions/<platform>.yaml 财务报告和审定财务报表 config/settings.yaml 有生产默认值 | 免费 | |
specs skills install | 安装前置并释放管弦乐技巧 .claude/skills/ | 免费 | |
specs migrate | 将旧的工作空间布局转换为当前工作空间布局 | 免费 |
数据在
| 命令 | 它会做什么 | 级别 | |
|---|---|---|---|
specs fetch | 下载 REST 原始有效载荷——文件、变量、样式——用于每个配置的图像源 | 免费 | |
specs scan | 通过勾选框发现组件并写出您所处理的列表 | 免费 | |
specs applyCustomTokens | 弹出 $custom 从映射文件到已获取的数据的符号对象 | 免费 | |
specs cache | 构建查找表格 render 解析比对 | 免费 | 过期 |
散开相片
| 命令 | 它会做什么 | 级别 | |
|---|---|---|---|
specs generate | 生成从获取的数据中提取的光谱、 被整理的表单, 或用 --from-bridge | 免费 + Pro |
这是更改许可证的命令之一。 自由输出带有完整的组件结构; Pro输出会添加符号引用,道具和能见度绑定,组成,以及无效的变体组合.
进一步读作: 命令上的图像组件规格。 。 。 .
密码
| 命令 | 它会做什么 | 级别 | |
|---|---|---|---|
specs react | 发射反射目标 react/ | 免费 + Pro | 过期 |
specs webcomponents | 将 Web 组件( 鼠标) 目标放入 webcomponents/ | 免费 + Pro | 过期 |
两个目标都写了同样的五件文物 记录了每一页 代码页:1 合同,则 脚手架,则 样式表页:1 CSS 变量,以及 故事书故事行为来自 角色概念 以规格表示,而不是以每个组件代码表示.
进一步读作: 从 specs 生成代码。 。 。 .
分析
| 命令 | 它会做什么 | 级别 | |
|---|---|---|---|
specs analyze | 在光谱树上运行分析器并写入汇总报告 analysis/ | 免费 | 过期 |
props——图书馆的每个道具,哪些组件共用一个道具styling横跨树状物和原始价值用途dependencies——什么构成什么,一个变化的爆炸半径keys——命名属性和要素的一致性roles——哪些角色概念被宣布,在何处缺失
版本
| 命令 | 它会做什么 | 级别 | |
|---|---|---|---|
specs version | 版本 spec 工作空间 : diff, (中文(简体) ), history, (中文(简体) ), cut, (中文(简体) ), tag, (中文(简体) ), restore, (中文(简体) ), figmapremerge, (中文(简体) ), report | 免费 | 过期 |
版本对工作空间 diff 进行分类,剪切一个版本文件夹,编写分类账条目,并生成一个分项化的更改日志——包括 a 预置报告 在大家合并之前 给一个法格玛分支.
图片、故事书和视觉测试
| 命令 | 它会做什么 | 级别 | |
|---|---|---|---|
specs bridge | start, (中文(简体) ), stop, (中文(简体) ), status 用于到达运行插件的本地桥 | 免费 | 过期 |
specs render | 向 Figma 发送光谱并在画布上构建组件 | 免费 | 过期 |
specs storybook | init, (中文(简体) ), dev, (中文(简体) ), publish ——在被放出树木上放出可移植的故事手册 | 免费 | 过期 |
specs testing visual | Pizel-diff 故事书对 Figma 出口的渲染,分八个明确阶段 | 免费 | 过期 |
render 关闭环路:在Figma外被作者或编辑的 spec 成为画布上的真实组件. 见 向图像显示, (中文(简体) ), 故事书,以及 测试。 。 。 .
图像插件
外观 选择组件或组件集,在画布上绘制可视化规格,并缓存文档上的机器可读光谱数据——准备复制到LLM或从桥上读取.
绘制了六个产出部分: 解剖学, (中文(简体) ), 道具,造型库存, 模式, (中文(简体) ), 版式,以及 数据。七面板控制它们:
- 光谱 ——文档中已经生成的每一个光谱,以重新运行,检查,或复制为YAML或JSON.
- 创建 ——从当前选择中生成一个 spec, 随进展而去.
- Canvas 输出 控制画布上绘制的光谱框.
- 设置 ——分节,格式,细节级别,道具,变体,元素,实例,地基, 布局和多栏布局,以及 自定义样式。 。 。 .
- 桥 ——在端口9001上选择本地WebSocket,让 CLI 读取当前选择,或从 spec 构建组件.
- 账户 许可证激活和等级状态.
- 关于 - 版本和链接.
形象最佳做法 覆盖插件对构建良好的库的期望 .
文档
系统 是权威的, 如何相貌 计划 ; 此寄存器对代码的权威性 已经。 。 。 .
- 命令行 概览、工作流程和每个命令一页的旗帜
- 司马 – 每类型一页,外加深层风格,打字和效果属性树
- 图片 ——插件输出部分和格式化
- 代码 - 什麽
specs react财务报告和审定财务报表specs webcomponents发射,文物 - 故事书 - 流出树木上的便携故事本
- 版本 ——变更分类,历史,身份,报告
- 指南——19个具体特征的取向 变相分层 改为 只有代码的道具
- 设置 - 每个公约和设定一页
- 作用 角色概念、清单和优先
- 释放 - 合并计划与CLI变化日志
网站的决定记录部分来自 adr/ 在建设时间,所以一个被接受的 ADR 出版本身.
进一步阅读
- 作为数据的组成部分 ——为什么一个组件作为记录比作为图画保存得更好
- 光谱驱动的UI组件开发 环绕着这个生态系统
- 构成部分合同和计划 ——什么属于合同,什么不属于合同
- 命令上的图像组件规格 ——从命令行生成光谱
- 从 specs 生成代码 反应和来自 spec 的 Web 组件
自由与赞成
一切都是免费的。 没有任何东西是有时间限制的,有水标记的,或被扣留的——自由光谱是一个完整,有效的光谱,自由回放组件会生成. Pro将一个组件连接到您的令牌系统,它的其他组件,以及它可以进入的每一个状态.
| 免费 | Pro 补充 | |
|---|---|---|
| 数据 | 构成部分结构、变式评价、元数据 | 脚本和样式引用、道具绑定、无效组合 |
| 图画布输出 | 每个输出区域,多列布局,所有设置 | 自定义样式、 实例设置、 桥面板 |
| 代码 | 组件,合同,样式表,每个变体轴一个故事 | 组成、格言、背景图像、复合故事、贴纸 |
Pro是10美元/月. 购买许可证,或读取 许可证发放 钥匙 计量 和全部的游戏细节.
问题
检查 现有问题 在打开一个新的。 对于错误,包括:
- Figma 版本和操作系统
- 复制步骤
- 预期与实际行为
- 截图,如果有用的话
对于特征请求,包括清晰的描述,用例,以及任何相关的模型.
欢迎提出的问题载于 黑社会。 。 。 .
许可证发放
| 软件包 | 许可证 |
|---|---|
packages/schema/ | CC BY 4.0 (英语) |
packages/cli/ | 麻省理工学院 |
当扩展或重新使用计划时, 信用 内森·柯蒂斯,链接到此仓库和许可证,并显示您所做的任何修改.
"这个项目使用 光谱UI 组件Schema 由内森·柯蒂斯执导 CC BY 4.0 (英语)""("史记")
免责声明:这是一个独立的项目,没有正式隶属于Figma Inc.