Positivus设计系统
Figma基于设计Storybook中描述的场景，使用下列步骤创建明细表，以便在概念设计中分析体量的周长HTML/CSS组件库。此项目包括：JavaScript实现设计令牌和组件而不依赖于运行时HTML正在聚焦模板。
特徴
- 纯粹的HTML/CSS组件（与JavaScript运行时无关）
- Figma基于规格的设计标记
- 全面的Storybook文档
- a11y附加辅助功能测试
- Figma设计集成
- 型安全Storybook为了故事TypeScript
组件
设计系统包含以下组件：
- 按钮 -主按钮和次按钮变量
- 标题 -打印标题组件
- 卡 -内容卡组件
- 输入 -表单输入组件
- 标志 -品牌标志组件
前提条件
- Node.js（LTS版本建议）
- pnpm 10.21.0以降
安装
# リポジトリをクローン
git clone
cd 20251125-gh-copilot-figma-mcp
# 依存関係をインストール
pnpm install使用方法
开発
Storybook启动开发服务器：
pnpm storybookStorybook啊启动
构建
生产静态Storybook构建：
pnpm build-storybook构建的文件storybook-static输出到目录。
项目结构
.
├── src/
│ ├── components/ # コンポーネントファイル
│ │ ├── [ComponentName]/
│ │ │ ├── [ComponentName].html # 静的HTMLテンプレート
│ │ │ └── [ComponentName].stories.ts # Storybookストーリー
│ └── styles/ # CSSファイル
│ ├── base/ # デザイントークンと基礎スタイル
│ │ ├── _variables.css # Figmaからのデザイントークン
│ │ ├── _reset.css # CSSリセット
│ │ └── _typography.css # タイポグラフィのデフォルト
│ ├── components/ # コンポーネント固有のスタイル
│ ├── layouts/ # レイアウトユーティリティ
│ └── main.css # メインエントリーポイント
├── .storybook/ # Storybook設定
└── CLAUDE.md # Claude Code用のプロジェクト指示设计标记
所有设计令牌src/styles/base/_variables.css的CSS定义为自定义属性：
- 颜色：
--color-green、--color-dark、--color-grey、--color-black、--color-white - 打字术：Space Grotesk字体系列和各种权重大小
- 间隔：
--spacing-xs从--spacing-2xl - 边框半径：
--radius-sm、--radius-md、--radius-lg - 集装箱：
--container-max-width（1240像素）--container-padding（100像素）
编码质量
该项目使用多种工具来保持代码质量：
# JavaScript/TypeScriptのLintとフォーマット
pnpm biome check
pnpm biome check --write
# Markdownファイルのチェック
pnpm remark .
# 露出したシークレットのチェック
pnpm secretlint包管理
此项目包括：pnpm使用工作区目录（严格模式）。所有的依赖关系pnpm-workspace.yaml的，之catalog区域中定义。添加依赖关系时，请先添加到目录中，然后单击package.json的catalog:来修改标记元素的显示属性。
技术栈
- 故事书 -组件文档和开发环境
- TypeScript - Storybook故事类型检查
- 生物群系 -快速Linter成形机
- 备注 - Markdown的，之linting
- 承诺 - Conventional Commits应用
- 维特 - Storybook构建工具
分发
单击功能区上的贡献.md来修改标记元素的显示属性。
许可证
麻省理工学院
著者
森巴龙一郎