AI导哈

静态HTML/CSS组件库

基于Figma设计、通过Storybook文档化的纯HTML/CSS组件库，无需JavaScript运行时依赖，专注于静态HTML模板和设计令牌实现。

  • by lc-semba-ryuichiro
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 lc-semba-ryuichiro/20251125-gh-copilot-figma-mcp

使用说明

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 <repository-url>
cd 20251125-gh-copilot-figma-mcp

# 依存関係をインストール
pnpm install

使用方法

开発

Storybook启动开发服务器：

pnpm storybook

Storybook啊http://localhost:6006启动

构建

生产静态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来修改标记元素的显示属性。

许可证

麻省理工学院

著者

森巴龙一郎

相关 MCP