🔴 Before generating any design draft, you must read the following two hard constraint documents：
- references/hard-constraints/skill.md — Variable Mapping Hard Constraints: The whitelist of valid values for font size / line height / spacing / grid / icon size under the PC / MB dual breakpoints. All geometric values must be strictly selected from this whitelist; rounding, inference, or fabricating numbers is prohibited.
- references/hard-constraints/rules.md — Component Combination Rules: Button alignment / arrangement / spacing, component grid attachment, card spacing, prohibited combination blacklist, and automatic verification checklist.
The above two constraintshave the highest priority, and are on par with #Icon Handling Specification (Core Constraint) below; none can be omitted.
Overview
A reusable design system workflow implemented based on Pixso MCP tools, supporting:
- Read and apply grid and design variables (Tokens)
- Call the existing Symbol component library
- Automatically generate editable design drafts that comply with specifications
Design Capabilities
- Grid system layout specifications (data source see #Data Resources）
- Global design variables (Tokens) management (data source see #Data Resources）
- Pixso Symbol component library maintenance and invocation
- Rapid generation of componentized, standardized interfaces
- Unified visual style and interaction logic
Data Resources
Data such as grids, responsive breakpoints, and design variables comes from the atomgit upstream repository.When in use, fetch the latest version in real time via WebFetch; do not bundle locally:
| Purpose | URL |
|---|---|
| Grid specifications | https://raw.atomgit.com/openeuler/opendesign-token/raw/master/packages/opendesign-token/tokens/grid-token.json |
| Responsive breakpoints | https://raw.atomgit.com/openeuler/opendesign-token/raw/master/packages/opendesign-token/tokens/responsive-token.json |
| openEuler theme Token | https://raw.atomgit.com/openeuler/opendesign-token/raw/master/packages/opendesign-token/tokens/openeuler-token.json |
Index files bundled in this skill (dedicated to design draft production, no upstream source of truth):
- references/component-keys.md — componentKey index of 536 UI component variants
- references/icon-keys.md — componentKey index of 187 icons
Component Index
See references/components/{name}.mdfor detailed design specifications of each component, covering applicable scenarios, variant descriptions, layout specifications, color/font Token mapping, and identification features.
| Component | Description | Component | Description |
|---|---|---|---|
| OAnchor | Anchor | OMessage | Global Message |
| OBreadcrumb | Breadcrumb | ONavigation | Navigation |
| OButton | Button | OPagination | Pagination |
| OCard | Card | ORadio | Radio Button |
| OCarousel | Carousel Indicator | OCheckbox | Checkbox |
| ODivider | Divider | OStep | Steps |
| ODropdown | Dropdown Menu | OScrollbar | Scrollbar |
| OInput | Input Field | OTab | Tabs |
| OLink | Link | OTable | Data Table |
| OLoading | Loading | OTag | Tag |
| OMenu | Menu | OToggle | Switch Button |
| OSelect | Selector |
Icon Handling Specification (Core Constraints)
⚠️ The rules in this section have the highest priority, and all generation steps must comply with them.
Icon Storage Mechanism
In the OpenEuler design system, icons are stored on the Pixso server as svgSha external references (not embedded SVG paths). This means:
- Icon SVG datadoes not exist in the DSL, and the path cannot be extracted directly through tools
code_to_designAny SVG embedded ingeneric placeholder, and does not belong to the design system iconscreate_instanceGenerated component instancescome with the correct icons, resolved by Pixso from the server at render time
Icon Library Resources
OpenEuler has an independent icon library Pixso file kbqInwBrCTGnM0MsPJDgvA, containing 187 linear icons(24×24px). For the complete index, see references/icon-keys.md。
| Category | Path Prefix | Quantity |
|---|---|---|
| Common Icons (Linear) | icon/01公共图标/线性/ |
185 |
| Switch | icon/开关/ |
2 |
Icon Usage Rules
| Scenario | Method |
|---|---|
| Component state icons (Radio circle, Checkbox box, Switch, etc.) | Before generation, you must first ls references/assets/<组件名>/; if an SVG exists → Read then inline; only if no file exists → use CSS, with an explanatory comment |
| UI components containing icons (navigation, search, buttons, pagination, dropdowns, etc.) | Same as above, before generation you must first ls references/assets/<组件名>/; if an SVG exists → Read then inline; only if no file exists → hand-write the SVG path |
| Standalone icons (functional icons in custom layouts) | Same as above, first check references/assets/; if a file exists, inline it directly; if no file exists → check icon-keys.md hand-written linear SVG |
| Pure layout structure (background, container, grid, text blocks) | code_to_design |
| SVG source priority (unified across all scenarios) | ① references/assets/ existing file (Read inline) → ② hand-written SVG path conforming to the linear style → ③ CSS (fallback, requires a comment) |
SVG Embedding Method: Write the <svg> tag directly into the HTML; do not use <img src>. Icon colors follow the design system Tokens, and by default use currentColor to inherit the parent element's color value.
create_instancecan still be used in special scenarios requiring live Symbol binding or Token linkage, but is no longer the mandatory path for icons.
Execution Workflow
Step Zero: Read the hard constraint documents (mandatory starting procedure; both must be read)
① 读取 references/hard-constraints/skill.md
— 锁定当前目标设备（MB 或 PC）
— 明确该设备下字号 / 行高 / 间距 / 栅格 / 图标尺寸的合法取值集合
② 读取 references/hard-constraints/rules.md
— 明确按钮对齐 / 排列优先级 / 间距规则
— 明确组件栅格挂靠要求、卡片间距规则
— 明确禁止组合黑名单（Banner 嵌套、多尺寸 Banner 并排、按钮位置等）
The geometric values of all subsequent steps must fall within the whitelist of ①, and component arrangement must comply with the combination rules of ②. For requirements that cannot be mapped to the constraints → stop and ask the user; fabricating data or silently letting it pass is prohibited.
Step One: Read the design specification
使用 get_variable_sets 获取当前文件所有变量集合
使用 get_variables(variableSetId) 读取具体变量值（颜色/字号/间距等）
使用 get_local_styles 获取本地样式（填充色/描边/文字样式）
If you need to cross-reference the upstream Token source of truth (semantic variable names, grid breakpoints), fetch via WebFetch the three atomgit URLs in #Data Resources .
Step Two: Read the component library
使用 get_all_components 列出所有可用 Symbol 组件
根据需求筛选目标组件名称和 componentKey
All components containing graphics (Radio / Checkbox / Switch / navigation / search box / buttons / dropdowns, etc.): before generating HTML that contains any graphics, icons, or state graphics,the following check must be performed first, and must not be skipped:
1. ls references/assets/<组件名>/ ← 确认 assets 下是否有该组件的 SVG
2. 有文件 → Read 每个文件，全部内联到 HTML 对应位置
3. 无文件 → 才允许手写 SVG 路径或 CSS，并在 HTML 注释中注明「assets 中无资源」
⚠️ This rule covers all scenarios: component state icons (Radio circle, Checkbox square), icons embedded in UI components (navigation Logo, search icon, button Icon), standalone functional icons—always check assets first; if present, use it。
Standalone icon lookup: when a standalone icon is needed, consult references/icon-keys.md match by Chinese icon name, then take the corresponding SVG file from the references/assets/ directory and embed it; if the icon is not in assets, hand-write an SVG path in linear style.
Step 3: Confirm the components involved this time (mandatory user inquiry)
🚨 It is forbidden to decide on your own which components to use and then jump straight to generation. You must first confirm with the user.
Based on the design requirements, list all the components you think will be used this time, present them to the user as a checklist,and only proceed after the user confirms or corrects it：
我理解本次设计需要以下组件，请确认或补充：
- ONavigation（顶部导航）
- OCard × N（卡片列表）
- OButton（按钮）
- OPagination（分页）
- …（按需列出）
如有遗漏或需要调整，请告知，确认后我将读取对应规范再生成。
After the user confirms, read each component's references/components/{name}.mdone by one; only after all have been read can you proceed to the next step.
Step 4: Choose the generation mode
Choose between the two modes based on user requirements:
| Condition | Choice |
|---|---|
| User needs a Pixso editable canvas, Token binding, or interactive prototype | Mode A |
| User needs a website page that can be opened directly in a browser / not explicitly specified | Mode B (default) |
🚨 Whether Mode A or Mode B—reading the specifications is mandatory, customization is forbidden
Before generating any content, you must read the specification documents of all involved components one by one
references/components/{name}.md。
- Forbidden! Forbidden!! Generate any visual attributes (color values, font sizes, line heights, spacing, corner radii, variant parameters…) based on experience, memory, or inference
- There are only three legitimate sources of parameters: ① the corresponding component specification document ② the hard-constraint whitelist (Step Zero) ③ the upstream Token source of truth
- Any value outside these three constitutescustom content and is strictly forbidden, including but not limited to: approximate color values, estimated spacing, inferred corner radii, guessed default variants
- If the required parameter cannot be found in the specification document → stop and ask the user,filling it in on your own is forbidden
Mode A: Pixso editable canvas mode (single stage)
No need for create_instance，code_to_design output the complete design draft in one go; all element positions and styles are automatically in place, and every layer can be edited directly in Pixso.
[Mandatory prerequisite: read specification documents] Before execution, you must read the
references/components/{name}.mdof all involved components, and generate strictly according to the variant parameters, color Tokens, spacing specifications, and font size specifications in the specification documents.Forbidden! Forbidden!! Customizing any visual attribute.
Executed uniformly in all scenarios：
【前置】Read references/components/{name}.md ← 涉及哪些组件就读哪些，不可跳过
code_to_design(htmlStr)
— 完整页面 HTML，包含所有组件的精确位置与像素级样式还原
— 所有样式值必须来自规范文档或 Token 白名单，禁止自定义
— 图标：直接内嵌 <svg> 路径（不使用占位符，不使用 <img src>）
— SVG 颜色使用 currentColor 继承父元素，或按 Token 硬编码对应色值
— 产出为 Pixso 可直接编辑的设计稿画布
Mode B: Visualized HTML website mode (single stage, default)
Generate a complete HTML website page that can run independently in a browser, reproducing the design system's visual style at pixel level.
[Mandatory prerequisite: read specification documents] Before execution, you must read the
references/components/{name}.mdof all involved components, and generate strictly according to the variant parameters, color Tokens, spacing specifications, and font size specifications in the specification documents.Forbidden! Forbidden!! Customizing any visual attribute.
Executed uniformly in all scenarios：
【前置】Read references/components/{name}.md ← 涉及哪些组件就读哪些，不可跳过
生成独立 HTML 文件
— 完整页面 HTML + 内联 CSS，包含所有组件的精确位置与像素级样式
— 所有样式值必须来自规范文档或 Token 白名单，禁止自定义
— 图标：直接内嵌 <svg> 路径（不使用占位符，不使用 <img src>）
— SVG 颜色使用 currentColor 或按 Token 硬编码对应 CSS 变量
— 产出为可在浏览器直接打开 / 部署的网站页面
SVG icon specifications：
| Attribute | Specifications |
|---|---|
| Size | Consistent with design system icons (usually 24×24px, using icon_size-m Token） |
| Style | Linear (stroke), consistent with the OpenEuler icon library |
| Color | currentColor(inherits the parent element's text color) or the corresponding Token color value |
| Usage | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" ...> Directly inline |
Step 5: Apply design variables and styles
set_fill_style(itemId, styleKey) — 应用填充色样式
set_text_style(itemId, styleKey) — 应用文字样式
set_stroke_style(itemId, styleKey) — 应用描边样式
set_bound_variables(bindings) — 绑定设计变量（Token）
Step 6: Verify the visual result
get_node_dsl(itemId) — 读取节点 DSL 结构，验证层级与属性
get_image(itemId) — 生成节点预览图，确认视觉结果
How to obtain the node ID
- Extract from the Pixso canvas URL:
?item-id=1:2→ itemId is1:2 - Use
mcp__pixso-desktop__get_all_componentsormcp__pixso-desktop__get_local_stylesto look up the corresponding key/id in the returned result
Component documentation specifications
When generating the component design specification document (skills/opendesign-design/references/components/{name}.md),you mustmatch the color values, font sizes, spacing, etc. in the design file to the variable names of the upstream Tokens (data is pulled from the remote URL in #Data Resources ):
Properties that must be matched
| Property type | Token format | Example |
|---|---|---|
| Color | color-* |
color-info3、color-primary1、color-link1 |
| Font size | font_size-* |
font_size-tip1 (14px) |
| Line height | line_height-* |
line_height-tip1 (22px) |
| Font weight | font_weight-* |
font_weight-regular (400)、font_weight-bold (600) |
| Spacing | gap-* |
gap-1 (4px)、gap-2 (8px) |
| Corner radius | radius_control-* |
radius_control-m (4px) |
| Icon size | icon_size-* / icon_size_control-* |
icon_size-m (24px) |
| Shadow | shadow-* |
shadow-1 |
Color Token reference table
| Semantics | Token | Usage |
|---|---|---|
| Primary text/title | color-info1 |
Emphasized information |
| Secondary text/body | color-info2 |
Sub-emphasis |
| Tertiary text/auxiliary | color-info3 |
Auxiliary information, breadcrumb level |
| Disabled text | color-info4 |
Disabled state |
| Link text | color-link1 |
Link default state |
| Accent color/primary color | color-primary1 |
Current page, active state |
| Success color | color-success1 |
Success message |
| Warning color | color-warning1 |
Warning message |
| Danger color | color-danger1 |
Error/danger message |
| Control border | color-control1 |
Input field border, etc. |
Document format requirements
The style specification table must include a Token column:
### 颜色
| 元素 | Token | Dark=off | Dark=on |
|---|---|---|---|
| 文字 | `color-info3` | `rgba(var(--o-grey-14), 0.6)` | `rgba(var(--o-grey-1), 0.6)` |
Notes
- When you are about to use a component to generate a design file, you should read the opendesign-components skill to see whether the parameters described in the corresponding component development skill are sufficient to support your idea
- All
itemIdthe format is"数字:数字", for example"123:456" - If itemId is not specified, the tool operates by default on the node currently selected in the Pixso canvas
- When exporting images, use
get_export_imageand configure exportSettings (PNG/SVG/PDF, etc.) - All color values, font sizes, and spacing in the component documentation must match the variable names of the upstream Tokens, hard-coded values are prohibited
- Icon rules: Both modes directly inline the
<svg>path; placeholders with color blocks or<img src>references are prohibited - SVG color: Use
currentColorInherit from the parent element, or directly enter the CSS variable value of the corresponding Token - Customization prohibited (final fallback): When generating in Mode A / Mode B, any style value that cannot be traced to a basis in the component specification document, the hard constraint whitelist, or the upstream Token source of truth,must never be output. It is not permitted to skip reading the specification and generate directly on the grounds of "common default values," "empirical estimation," or "visual approximation."
componentKey Quick Reference
- Complete 536 UI component variants:references/component-keys.md
- Complete 187 icon componentKeys:references/icon-keys.md
Common high-frequency variants (default variants in Light mode, verified):
| Component | Variant | componentKey |
|---|---|---|
| ONavigation/Top Navigation | PC, Dark=off | 561d3014fbe6f361abfecc203a06f1ab6cad43af |
| ONavigation/Top Navigation | PC, Dark=on | c4522744b94335f4bc8fbc358c2316d3c447b771 |
| ONavigation/Top Navigation | Mb, Dark=off | 7675ede074069cf358a0f164f76e1c6c119a592f |
| Navigation Navigation/Bottom Navigation | PC | 5d66a734f21bfcce1fbe4fce1d79f832b7f08f02 |
| Navigation Navigation/Bottom Navigation | Mb | 62383dfdd93fd29e6dfcb7def1861d22d005324a |
| OBreadcrumb Breadcrumb | Dark=off | 7838d75ba480e2c51fe0f741109ba6c9745a6f86 |
| Search Box Search | large, Enabled, Light | 504d78f315ae03447c67e6019f787e5656b4aa1a |
| Search Box Search | medium, Enabled, Light | bfb0631d6779aa79179e27e84534dd68acd2fa0e |
| OButton Button | solid, medium, Light | eab0e6c545d27376ba67aef7dd233fc58c476234 |
| OButton Button | outline, medium, Light | 3cd0c2f583c60180725e297d3529d67ed62fcad8 |
| OButton Button | text, medium, Light | 2b717cf5c4d422ff4385f6f215d52fa4dcc1c04a |
| OButton Button | solid, large, Light | 1a36bbfd374263c7b4644d4490e8bb65450c2f57 |
| ODropdown Dropdown Menu | medium, solid, Light | 647e1f27461028010d0828c17a8dfb6f245bd449 |
| ODropdown Dropdown Menu | medium, outline, Light | 6c12a6d3766a2055cd8f300e001c589084b2decd |
| ODropdown Dropdown Menu | medium, text, Light | cdf3700ce2d84a8bcf81720f9d64a0c867909268 |
| OPagination Pagination | All, Dark=off | 35bb7a0ef9189834048e73d6832418da0796d993 |
| OPagination Pagination | Simple, Dark=off | c8d2772ff9159d6bc99498f30ba24bb001039139 |
| OCard Card | cover, vertical, Light | a22044aaa494bba137bd3ebba74319449b998694 |
| OCard Card | cover, horizontal, Light | 0fceafcdae43547862ffb167bdcce89f510c3c35 |
| OCard Card | icon, vertical, Light | 6103b3265e752087a546bf1b77a0f1b5bfef888b |
| OCard Card | icon, horizontal, Light | e2a10a804dc8cb9ab507d237c712f65c7cf12f5e |