@ia-ccun/code-agent-cli 0.0.47-test.1 → 0.0.49-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/config/agent/extensions/aicode-tips.ts +25 -6
- package/config/agent/extensions/error-monitor.ts +43 -4
- package/config/agent/extensions/msg-debug.ts +18 -8
- package/config/agent/skills/design-md/README.md +34 -0
- package/config/agent/skills/design-md/SKILL.md +172 -0
- package/config/agent/skills/design-md/examples/DESIGN.md +154 -0
- package/config/agent/skills/fireworks-tech-graph/LICENSE +21 -0
- package/config/agent/skills/fireworks-tech-graph/README.md +528 -0
- package/config/agent/skills/fireworks-tech-graph/README.zh.md +499 -0
- package/config/agent/skills/fireworks-tech-graph/SKILL.md +537 -0
- package/config/agent/skills/fireworks-tech-graph/agentloop-core.svg +101 -0
- package/config/agent/skills/fireworks-tech-graph/agents/openai.yaml +4 -0
- package/config/agent/skills/fireworks-tech-graph/assets/samples/sample-style1-flat.png +0 -0
- package/config/agent/skills/fireworks-tech-graph/assets/samples/sample-style2-dark.png +0 -0
- package/config/agent/skills/fireworks-tech-graph/assets/samples/sample-style3-blueprint.png +0 -0
- package/config/agent/skills/fireworks-tech-graph/assets/samples/sample-style4-notion.png +0 -0
- package/config/agent/skills/fireworks-tech-graph/assets/samples/sample-style5-glass.png +0 -0
- package/config/agent/skills/fireworks-tech-graph/assets/samples/sample-style6-claude.png +0 -0
- package/config/agent/skills/fireworks-tech-graph/assets/samples/sample-style7-openai.png +0 -0
- package/config/agent/skills/fireworks-tech-graph/fixtures/agent-memory-types-style4.json +181 -0
- package/config/agent/skills/fireworks-tech-graph/fixtures/api-flow-style7.json +40 -0
- package/config/agent/skills/fireworks-tech-graph/fixtures/mem0-style1.json +297 -0
- package/config/agent/skills/fireworks-tech-graph/fixtures/microservices-style3.json +64 -0
- package/config/agent/skills/fireworks-tech-graph/fixtures/multi-agent-style5.json +45 -0
- package/config/agent/skills/fireworks-tech-graph/fixtures/system-architecture-style6.json +48 -0
- package/config/agent/skills/fireworks-tech-graph/fixtures/tool-call-style2.json +182 -0
- package/config/agent/skills/fireworks-tech-graph/package.json +42 -0
- package/config/agent/skills/fireworks-tech-graph/references/icons.md +406 -0
- package/config/agent/skills/fireworks-tech-graph/references/style-1-flat-icon.md +108 -0
- package/config/agent/skills/fireworks-tech-graph/references/style-2-dark-terminal.md +107 -0
- package/config/agent/skills/fireworks-tech-graph/references/style-3-blueprint.md +113 -0
- package/config/agent/skills/fireworks-tech-graph/references/style-4-notion-clean.md +94 -0
- package/config/agent/skills/fireworks-tech-graph/references/style-5-glassmorphism.md +125 -0
- package/config/agent/skills/fireworks-tech-graph/references/style-6-claude-official.md +209 -0
- package/config/agent/skills/fireworks-tech-graph/references/style-7-openai.md +215 -0
- package/config/agent/skills/fireworks-tech-graph/references/style-diagram-matrix.md +135 -0
- package/config/agent/skills/fireworks-tech-graph/references/svg-layout-best-practices.md +100 -0
- package/config/agent/skills/fireworks-tech-graph/scripts/README.md +244 -0
- package/config/agent/skills/fireworks-tech-graph/scripts/generate-diagram.sh +157 -0
- package/config/agent/skills/fireworks-tech-graph/scripts/generate-from-template.py +1556 -0
- package/config/agent/skills/fireworks-tech-graph/scripts/test-all-styles.sh +135 -0
- package/config/agent/skills/fireworks-tech-graph/scripts/validate-svg.sh +292 -0
- package/config/agent/skills/fireworks-tech-graph/templates/agent-architecture.svg +28 -0
- package/config/agent/skills/fireworks-tech-graph/templates/architecture.svg +23 -0
- package/config/agent/skills/fireworks-tech-graph/templates/comparison-matrix.svg +14 -0
- package/config/agent/skills/fireworks-tech-graph/templates/data-flow.svg +28 -0
- package/config/agent/skills/fireworks-tech-graph/templates/er-diagram.svg +21 -0
- package/config/agent/skills/fireworks-tech-graph/templates/flowchart.svg +21 -0
- package/config/agent/skills/fireworks-tech-graph/templates/sequence.svg +20 -0
- package/config/agent/skills/fireworks-tech-graph/templates/state-machine.svg +20 -0
- package/config/agent/skills/fireworks-tech-graph/templates/timeline.svg +19 -0
- package/config/agent/skills/fireworks-tech-graph/templates/use-case.svg +21 -0
- package/config/agent/skills/impeccable/adapt/SKILL.md +205 -0
- package/config/agent/skills/impeccable/animate/SKILL.md +178 -0
- package/config/agent/skills/impeccable/arrange/SKILL.md +128 -0
- package/config/agent/skills/impeccable/audit/SKILL.md +129 -0
- package/config/agent/skills/impeccable/bolder/SKILL.md +120 -0
- package/config/agent/skills/impeccable/clarify/SKILL.md +186 -0
- package/config/agent/skills/impeccable/colorize/SKILL.md +146 -0
- package/config/agent/skills/impeccable/critique/SKILL.md +123 -0
- package/config/agent/skills/impeccable/delight/SKILL.md +307 -0
- package/config/agent/skills/impeccable/distill/SKILL.md +125 -0
- package/config/agent/skills/impeccable/extract/SKILL.md +95 -0
- package/config/agent/skills/impeccable/frontend-design/reference/color-and-contrast.md +132 -0
- package/config/agent/skills/impeccable/frontend-design/reference/interaction-design.md +123 -0
- package/config/agent/skills/impeccable/frontend-design/reference/motion-design.md +99 -0
- package/config/agent/skills/impeccable/frontend-design/reference/responsive-design.md +114 -0
- package/config/agent/skills/impeccable/frontend-design/reference/spatial-design.md +100 -0
- package/config/agent/skills/impeccable/frontend-design/reference/typography.md +133 -0
- package/config/agent/skills/impeccable/frontend-design/reference/ux-writing.md +107 -0
- package/config/agent/skills/impeccable/harden/SKILL.md +358 -0
- package/config/agent/skills/impeccable/normalize/SKILL.md +74 -0
- package/config/agent/skills/impeccable/onboard/SKILL.md +249 -0
- package/config/agent/skills/impeccable/optimize/SKILL.md +269 -0
- package/config/agent/skills/impeccable/overdrive/SKILL.md +145 -0
- package/config/agent/skills/impeccable/polish/SKILL.md +206 -0
- package/config/agent/skills/impeccable/quieter/SKILL.md +106 -0
- package/config/agent/skills/impeccable/teach-impeccable/SKILL.md +72 -0
- package/config/agent/skills/impeccable/typeset/SKILL.md +119 -0
- package/package.json +1 -1
|
@@ -11,7 +11,7 @@ import type { ExtensionAPI, ExtensionContext } from "@mariozechner/pi-coding-age
|
|
|
11
11
|
const AICODE_TIPS = [
|
|
12
12
|
"@ 快速搜索项目文件",
|
|
13
13
|
"Ctrl+L 快速切换模型",
|
|
14
|
-
"Ctrl+P/Shift+Ctrl+P
|
|
14
|
+
"Ctrl+P/Shift+Ctrl+P 切换范围模型",
|
|
15
15
|
"Shift+Tab 切换思考级别",
|
|
16
16
|
"Ctrl+O 展开/折叠工具输出",
|
|
17
17
|
"Ctrl+T 展开/折叠思考块",
|
|
@@ -26,7 +26,7 @@ const AICODE_TIPS = [
|
|
|
26
26
|
"/copy 复制最后消息",
|
|
27
27
|
"/name 设置会话名称",
|
|
28
28
|
"/hotkeys 显示所有快捷键",
|
|
29
|
-
"/reload
|
|
29
|
+
"/reload 重新加载配置文件",
|
|
30
30
|
"/new 开始新会话",
|
|
31
31
|
"!cmd 执行 bash",
|
|
32
32
|
"!!cmd 执行bash但不发送给AI",
|
|
@@ -76,9 +76,17 @@ const AICODE_TIPS = [
|
|
|
76
76
|
"/btw 并行侧边对话,可在不中断主流程的情况下进行临时讨论或查询 ",
|
|
77
77
|
"/rewind 回退到任意工具执行前的状态,支持快照恢复和撤销重做 ",
|
|
78
78
|
"/mcp 连接现有的MCP服务器(如xx平台、企业微信等等),扩展AI能力支持多种外部工具和服务 ",
|
|
79
|
+
// 消息传递模式提示
|
|
80
|
+
"Enter 插话消息 - 在工具执行后立即发送,中断AI思考流程",
|
|
81
|
+
"Alt+Enter 排队消息 - 等待AI完全结束后发送,不中断AI工作",
|
|
82
|
+
"Escape 中断当前AI并恢复编辑器中的排队消息",
|
|
83
|
+
"Alt+Up 查看并编辑所有排队的消息",
|
|
84
|
+
"插话消息会打断AI正在执行的工具,等待响应",
|
|
85
|
+
"排队消息静默等待,AI空闲时自动发送",
|
|
86
|
+
"可在 /settings 中调整消息发送模式和行为偏好",
|
|
79
87
|
// 联系方式提示
|
|
80
|
-
"
|
|
81
|
-
"
|
|
88
|
+
"⚠️ 任何疑问或需求可联系 xujianjiang,支持需求对接开发、系统集成与扩展",
|
|
89
|
+
"⚠️ 内网手册参考 UniDoc《2026.03 AICode Agent CLI编码智能体使用手册》",
|
|
82
90
|
"⚠️ LLM API 4xx/5xx 错误时请确认模型配置是否正确,或在企微群咨询 jiangchi、maliang",
|
|
83
91
|
];
|
|
84
92
|
|
|
@@ -89,6 +97,16 @@ export default function (pi: ExtensionAPI) {
|
|
|
89
97
|
let currentCtx: ExtensionContext | undefined;
|
|
90
98
|
let isAutoPlaying = false;
|
|
91
99
|
|
|
100
|
+
// 基于 #49bccf (73, 188, 207) 的随机颜色生成
|
|
101
|
+
const getRandomTipColor = (): string => {
|
|
102
|
+
const baseR = 73, baseG = 188, baseB = 207;
|
|
103
|
+
const offset = 20; // 增大偏移范围,透明度降低
|
|
104
|
+
const r = Math.max(0, Math.min(255, baseR + Math.floor(Math.random() * offset * 2 - offset)));
|
|
105
|
+
const g = Math.max(0, Math.min(255, baseG + Math.floor(Math.random() * offset * 2 - offset)));
|
|
106
|
+
const b = Math.max(0, Math.min(255, baseB + Math.floor(Math.random() * offset * 2 - offset)));
|
|
107
|
+
return `\x1b[38;2;${r};${g};${b}m`;
|
|
108
|
+
};
|
|
109
|
+
|
|
92
110
|
const hideTip = () => {
|
|
93
111
|
if (!currentCtx?.hasUI) return;
|
|
94
112
|
currentCtx.ui.setWidget("aicode-tips", [], { placement: "aboveEditor" });
|
|
@@ -125,8 +143,9 @@ export default function (pi: ExtensionAPI) {
|
|
|
125
143
|
}
|
|
126
144
|
currentTipIndex = randomIndex;
|
|
127
145
|
const tip = AICODE_TIPS[randomIndex];
|
|
128
|
-
//
|
|
129
|
-
const
|
|
146
|
+
// 使用随机颜色
|
|
147
|
+
const color = getRandomTipColor();
|
|
148
|
+
const coloredTip = `${color}tips: ${tip}\x1b[0m`;
|
|
130
149
|
currentCtx.ui.setWidget("aicode-tips", [coloredTip], { placement: "aboveEditor" });
|
|
131
150
|
|
|
132
151
|
// 自动轮播:10秒后隐藏,隐藏后3秒显示下一条
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*
|
|
4
4
|
* @author: xujianjiang
|
|
5
5
|
*
|
|
6
|
-
* Logs errors to ./.aicode-cli/debug-logs/aicode-error.log
|
|
6
|
+
* Logs errors to ./.aicode-cli/debug-logs/aicode-error-YYYY-MM-DD.log
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
9
|
import type { ExtensionAPI } from "@mariozechner/pi-coding-agent";
|
|
@@ -12,7 +12,44 @@ import path from "path";
|
|
|
12
12
|
|
|
13
13
|
// Error log file configuration
|
|
14
14
|
const ERROR_LOG_DIR = path.resolve(process.cwd(), "./.aicode-cli/debug-logs");
|
|
15
|
-
const
|
|
15
|
+
const KEEP_DAYS = 2; // 保留最近2天
|
|
16
|
+
|
|
17
|
+
// 北京时间格式化函数 (UTC+8)
|
|
18
|
+
function formatBeijingTime(date: Date = new Date()): string {
|
|
19
|
+
return date.toLocaleString("zh-CN", { timeZone: "Asia/Shanghai" });
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
// 格式化为文件名日期字符串 (北京时间)
|
|
23
|
+
function getLogFileName(date: Date = new Date()): string {
|
|
24
|
+
const beijingDate = new Date(date.toLocaleString("zh-CN", { timeZone: "Asia/Shanghai" }));
|
|
25
|
+
const year = beijingDate.getFullYear();
|
|
26
|
+
const month = String(beijingDate.getMonth() + 1).padStart(2, "0");
|
|
27
|
+
const day = String(beijingDate.getDate()).padStart(2, "0");
|
|
28
|
+
return `aicode-error-${year}-${month}-${day}.log`;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
// 清理过期日志文件(保留最近 KEEP_DAYS 天)
|
|
32
|
+
function cleanOldLogs(): void {
|
|
33
|
+
if (!fs.existsSync(ERROR_LOG_DIR)) return;
|
|
34
|
+
|
|
35
|
+
const files = fs.readdirSync(ERROR_LOG_DIR);
|
|
36
|
+
const now = new Date(new Date().toLocaleString("zh-CN", { timeZone: "Asia/Shanghai" }));
|
|
37
|
+
|
|
38
|
+
for (const file of files) {
|
|
39
|
+
if (!file.startsWith("aicode-error-") || !file.endsWith(".log")) continue;
|
|
40
|
+
|
|
41
|
+
// 从文件名提取日期
|
|
42
|
+
const match = file.match(/aicode-error-(\d{4})-(\d{2})-(\d{2})\.log/);
|
|
43
|
+
if (!match) continue;
|
|
44
|
+
|
|
45
|
+
const fileDate = new Date(parseInt(match[1]), parseInt(match[2]) - 1, parseInt(match[3]));
|
|
46
|
+
const diffDays = Math.floor((now.getTime() - fileDate.getTime()) / (1000 * 60 * 60 * 24));
|
|
47
|
+
|
|
48
|
+
if (diffDays > KEEP_DAYS) {
|
|
49
|
+
fs.unlinkSync(path.join(ERROR_LOG_DIR, file));
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}
|
|
16
53
|
|
|
17
54
|
// Ensure log directory exists
|
|
18
55
|
function ensureLogDir(): void {
|
|
@@ -27,13 +64,15 @@ function ensureLogDir(): void {
|
|
|
27
64
|
*/
|
|
28
65
|
function appendToErrorLog(message: string, context?: Record<string, unknown>): void {
|
|
29
66
|
ensureLogDir();
|
|
30
|
-
|
|
67
|
+
cleanOldLogs(); // 每次写日志时清理过期文件
|
|
68
|
+
const timestamp = formatBeijingTime();
|
|
69
|
+
const logFile = path.join(ERROR_LOG_DIR, getLogFileName());
|
|
31
70
|
let logEntry = `[${timestamp}] ${message}`;
|
|
32
71
|
if (context && Object.keys(context).length > 0) {
|
|
33
72
|
logEntry += `\nContext: ${JSON.stringify(context, null, 2)}`;
|
|
34
73
|
}
|
|
35
74
|
logEntry += "\n---\n";
|
|
36
|
-
fs.appendFileSync(
|
|
75
|
+
fs.appendFileSync(logFile, logEntry);
|
|
37
76
|
}
|
|
38
77
|
|
|
39
78
|
export default function (pi: ExtensionAPI) {
|
|
@@ -17,6 +17,20 @@ import { appendFileSync, existsSync, mkdirSync } from "node:fs";
|
|
|
17
17
|
import { join } from "node:path";
|
|
18
18
|
import type { ExtensionAPI } from "@mariozechner/pi-coding-agent";
|
|
19
19
|
|
|
20
|
+
// 北京时间格式化函数 (UTC+8)
|
|
21
|
+
function formatBeijingTime(date: Date = new Date()): string {
|
|
22
|
+
return date.toLocaleString("zh-CN", { timeZone: "Asia/Shanghai" });
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
// 格式化为文件名日期字符串 (北京时间)
|
|
26
|
+
function formatDateStr(date: Date = new Date()): string {
|
|
27
|
+
const beijingDate = new Date(date.toLocaleString("zh-CN", { timeZone: "Asia/Shanghai" }));
|
|
28
|
+
const year = beijingDate.getFullYear();
|
|
29
|
+
const month = String(beijingDate.getMonth() + 1).padStart(2, "0");
|
|
30
|
+
const day = String(beijingDate.getDate()).padStart(2, "0");
|
|
31
|
+
return `${year}-${month}-${day}`;
|
|
32
|
+
}
|
|
33
|
+
|
|
20
34
|
export default function (pi: ExtensionAPI) {
|
|
21
35
|
// Create log directory in project root: ./.aicode-cli/debug-logs
|
|
22
36
|
const logDir = join(process.cwd(), ".aicode-cli", "debug-logs");
|
|
@@ -25,11 +39,7 @@ export default function (pi: ExtensionAPI) {
|
|
|
25
39
|
}
|
|
26
40
|
|
|
27
41
|
// Format date as YYYY-MM-DD for daily log files
|
|
28
|
-
const
|
|
29
|
-
const year = today.getFullYear();
|
|
30
|
-
const month = String(today.getMonth() + 1).padStart(2, "0");
|
|
31
|
-
const day = String(today.getDate()).padStart(2, "0");
|
|
32
|
-
const dateStr = `${year}-${month}-${day}`;
|
|
42
|
+
const dateStr = formatDateStr();
|
|
33
43
|
const logFile = join(logDir, `llm-requests-${dateStr}.log`);
|
|
34
44
|
|
|
35
45
|
// Filter to only log user and assistant messages
|
|
@@ -69,7 +79,7 @@ export default function (pi: ExtensionAPI) {
|
|
|
69
79
|
|
|
70
80
|
// Log before request is sent
|
|
71
81
|
pi.on("before_provider_request", (event) => {
|
|
72
|
-
const timestamp =
|
|
82
|
+
const timestamp = formatBeijingTime();
|
|
73
83
|
const { provider, model, payload } = event;
|
|
74
84
|
|
|
75
85
|
// Filter messages to only user and assistant
|
|
@@ -112,7 +122,7 @@ ${JSON.stringify({ ...payload, messages: filteredMessages }, null, 2)}
|
|
|
112
122
|
|
|
113
123
|
// Log after response is received
|
|
114
124
|
pi.on("after_provider_response", (event) => {
|
|
115
|
-
const timestamp =
|
|
125
|
+
const timestamp = formatBeijingTime();
|
|
116
126
|
const { response, usage, cached } = event;
|
|
117
127
|
|
|
118
128
|
const logEntry = `
|
|
@@ -150,7 +160,7 @@ ${JSON.stringify(response, null, 2)}
|
|
|
150
160
|
|
|
151
161
|
// Log request errors
|
|
152
162
|
pi.on("error", (event) => {
|
|
153
|
-
const timestamp =
|
|
163
|
+
const timestamp = formatBeijingTime();
|
|
154
164
|
const { error, context } = event;
|
|
155
165
|
|
|
156
166
|
const logEntry = `
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
# Stitch Design System Documentation Skill
|
|
2
|
+
|
|
3
|
+
## Install
|
|
4
|
+
|
|
5
|
+
```bash
|
|
6
|
+
npx skills add google-labs-code/stitch-skills --skill design-md --global
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
## Example Prompt
|
|
10
|
+
|
|
11
|
+
```text
|
|
12
|
+
Analyze my Furniture Collection project's Home screen and generate a comprehensive DESIGN.md file documenting the design system.
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Skill Structure
|
|
16
|
+
|
|
17
|
+
This repository follows the **Agent Skills** open standard. Each skill is self-contained with its own logic, workflow, and reference materials.
|
|
18
|
+
|
|
19
|
+
```text
|
|
20
|
+
design-md/
|
|
21
|
+
├── SKILL.md — Core instructions & workflow
|
|
22
|
+
├── examples/ — Sample DESIGN.md outputs
|
|
23
|
+
└── README.md — This file
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## How it Works
|
|
27
|
+
|
|
28
|
+
When activated, the agent follows a structured design analysis pipeline:
|
|
29
|
+
|
|
30
|
+
1. **Retrieval**: Uses the Stitch MCP Server to fetch project screens, HTML code, and design metadata.
|
|
31
|
+
2. **Extraction**: Identifies design tokens including colors, typography, spacing, and component patterns.
|
|
32
|
+
3. **Translation**: Converts technical CSS/Tailwind values into descriptive, natural design language.
|
|
33
|
+
4. **Synthesis**: Generates a comprehensive DESIGN.md following the semantic design system format.
|
|
34
|
+
5. **Alignment**: Ensures output follows Stitch Effective Prompting Guide principles for optimal screen generation.
|
|
@@ -0,0 +1,172 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: design-md
|
|
3
|
+
description: Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files
|
|
4
|
+
allowed-tools:
|
|
5
|
+
- "stitch*:*"
|
|
6
|
+
- "Read"
|
|
7
|
+
- "Write"
|
|
8
|
+
- "web_fetch"
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
# Stitch DESIGN.md Skill
|
|
12
|
+
|
|
13
|
+
You are an expert Design Systems Lead. Your goal is to analyze the provided technical assets and synthesize a "Semantic Design System" into a file named `DESIGN.md`.
|
|
14
|
+
|
|
15
|
+
## Overview
|
|
16
|
+
|
|
17
|
+
This skill helps you create `DESIGN.md` files that serve as the "source of truth" for prompting Stitch to generate new screens that align perfectly with existing design language. Stitch interprets design through "Visual Descriptions" supported by specific color values.
|
|
18
|
+
|
|
19
|
+
## Prerequisites
|
|
20
|
+
|
|
21
|
+
- Access to the Stitch MCP Server
|
|
22
|
+
- A Stitch project with at least one designed screen
|
|
23
|
+
- Access to the Stitch Effective Prompting Guide: https://stitch.withgoogle.com/docs/learn/prompting/
|
|
24
|
+
|
|
25
|
+
## The Goal
|
|
26
|
+
|
|
27
|
+
The `DESIGN.md` file will serve as the "source of truth" for prompting Stitch to generate new screens that align perfectly with the existing design language. Stitch interprets design through "Visual Descriptions" supported by specific color values.
|
|
28
|
+
|
|
29
|
+
## Retrieval and Networking
|
|
30
|
+
|
|
31
|
+
To analyze a Stitch project, you must retrieve screen metadata and design assets using the Stitch MCP Server tools:
|
|
32
|
+
|
|
33
|
+
1. **Namespace discovery**: Run `list_tools` to find the Stitch MCP prefix. Use this prefix (e.g., `mcp_stitch:`) for all subsequent calls.
|
|
34
|
+
|
|
35
|
+
2. **Project lookup** (if Project ID is not provided):
|
|
36
|
+
- Call `[prefix]:list_projects` with `filter: "view=owned"` to retrieve all user projects
|
|
37
|
+
- Identify the target project by title or URL pattern
|
|
38
|
+
- Extract the Project ID from the `name` field (e.g., `projects/13534454087919359824`)
|
|
39
|
+
|
|
40
|
+
3. **Screen lookup** (if Screen ID is not provided):
|
|
41
|
+
- Call `[prefix]:list_screens` with the `projectId` (just the numeric ID, not the full path)
|
|
42
|
+
- Review screen titles to identify the target screen (e.g., "Home", "Landing Page")
|
|
43
|
+
- Extract the Screen ID from the screen's `name` field
|
|
44
|
+
|
|
45
|
+
4. **Metadata fetch**:
|
|
46
|
+
- Call `[prefix]:get_screen` with both `projectId` and `screenId` (both as numeric IDs only)
|
|
47
|
+
- This returns the complete screen object including:
|
|
48
|
+
- `screenshot.downloadUrl` - Visual reference of the design
|
|
49
|
+
- `htmlCode.downloadUrl` - Full HTML/CSS source code
|
|
50
|
+
- `width`, `height`, `deviceType` - Screen dimensions and target platform
|
|
51
|
+
- Project metadata including `designTheme` with color and style information
|
|
52
|
+
|
|
53
|
+
5. **Asset download**:
|
|
54
|
+
- Use `web_fetch` or `read_url_content` to download the HTML code from `htmlCode.downloadUrl`
|
|
55
|
+
- Optionally download the screenshot from `screenshot.downloadUrl` for visual reference
|
|
56
|
+
- Parse the HTML to extract Tailwind classes, custom CSS, and component patterns
|
|
57
|
+
|
|
58
|
+
6. **Project metadata extraction**:
|
|
59
|
+
- Call `[prefix]:get_project` with the project `name` (full path: `projects/{id}`) to get:
|
|
60
|
+
- `designTheme` object with color mode, fonts, roundness, custom colors
|
|
61
|
+
- Project-level design guidelines and descriptions
|
|
62
|
+
- Device type preferences and layout principles
|
|
63
|
+
|
|
64
|
+
## Analysis & Synthesis Instructions
|
|
65
|
+
|
|
66
|
+
### 1. Extract Project Identity (JSON)
|
|
67
|
+
- Locate the Project Title
|
|
68
|
+
- Locate the specific Project ID (e.g., from the `name` field in the JSON)
|
|
69
|
+
|
|
70
|
+
### 2. Define the Atmosphere (Image/HTML)
|
|
71
|
+
Evaluate the screenshot and HTML structure to capture the overall "vibe." Use evocative adjectives to describe the mood (e.g., "Airy," "Dense," "Minimalist," "Utilitarian").
|
|
72
|
+
|
|
73
|
+
### 3. Map the Color Palette (Tailwind Config/JSON)
|
|
74
|
+
Identify the key colors in the system. For each color, provide:
|
|
75
|
+
- A descriptive, natural language name that conveys its character (e.g., "Deep Muted Teal-Navy")
|
|
76
|
+
- The specific hex code in parentheses for precision (e.g., "#294056")
|
|
77
|
+
- Its specific functional role (e.g., "Used for primary actions")
|
|
78
|
+
|
|
79
|
+
### 4. Translate Geometry & Shape (CSS/Tailwind)
|
|
80
|
+
Convert technical `border-radius` and layout values into physical descriptions:
|
|
81
|
+
- Describe `rounded-full` as "Pill-shaped"
|
|
82
|
+
- Describe `rounded-lg` as "Subtly rounded corners"
|
|
83
|
+
- Describe `rounded-none` as "Sharp, squared-off edges"
|
|
84
|
+
|
|
85
|
+
### 5. Describe Depth & Elevation
|
|
86
|
+
Explain how the UI handles layers. Describe the presence and quality of shadows (e.g., "Flat," "Whisper-soft diffused shadows," or "Heavy, high-contrast drop shadows").
|
|
87
|
+
|
|
88
|
+
## Output Guidelines
|
|
89
|
+
|
|
90
|
+
- **Language:** Use descriptive design terminology and natural language exclusively
|
|
91
|
+
- **Format:** Generate a clean Markdown file following the structure below
|
|
92
|
+
- **Precision:** Include exact hex codes for colors while using descriptive names
|
|
93
|
+
- **Context:** Explain the "why" behind design decisions, not just the "what"
|
|
94
|
+
|
|
95
|
+
## Output Format (DESIGN.md Structure)
|
|
96
|
+
|
|
97
|
+
```markdown
|
|
98
|
+
# Design System: [Project Title]
|
|
99
|
+
**Project ID:** [Insert Project ID Here]
|
|
100
|
+
|
|
101
|
+
## 1. Visual Theme & Atmosphere
|
|
102
|
+
(Description of the mood, density, and aesthetic philosophy.)
|
|
103
|
+
|
|
104
|
+
## 2. Color Palette & Roles
|
|
105
|
+
(List colors by Descriptive Name + Hex Code + Functional Role.)
|
|
106
|
+
|
|
107
|
+
## 3. Typography Rules
|
|
108
|
+
(Description of font family, weight usage for headers vs. body, and letter-spacing character.)
|
|
109
|
+
|
|
110
|
+
## 4. Component Stylings
|
|
111
|
+
* **Buttons:** (Shape description, color assignment, behavior).
|
|
112
|
+
* **Cards/Containers:** (Corner roundness description, background color, shadow depth).
|
|
113
|
+
* **Inputs/Forms:** (Stroke style, background).
|
|
114
|
+
|
|
115
|
+
## 5. Layout Principles
|
|
116
|
+
(Description of whitespace strategy, margins, and grid alignment.)
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
## Usage Example
|
|
120
|
+
|
|
121
|
+
To use this skill for the Furniture Collection project:
|
|
122
|
+
|
|
123
|
+
1. **Retrieve project information:**
|
|
124
|
+
```
|
|
125
|
+
Use the Stitch MCP Server to get the Furniture Collection project
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
2. **Get the Home page screen details:**
|
|
129
|
+
```
|
|
130
|
+
Retrieve the Home page screen's code, image, and screen object information
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
3. **Reference best practices:**
|
|
134
|
+
```
|
|
135
|
+
Review the Stitch Effective Prompting Guide at:
|
|
136
|
+
https://stitch.withgoogle.com/docs/learn/prompting/
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
4. **Analyze and synthesize:**
|
|
140
|
+
- Extract all relevant design tokens from the screen
|
|
141
|
+
- Translate technical values into descriptive language
|
|
142
|
+
- Organize information according to the DESIGN.md structure
|
|
143
|
+
|
|
144
|
+
5. **Generate the file:**
|
|
145
|
+
- Create `DESIGN.md` in the project directory
|
|
146
|
+
- Follow the prescribed format exactly
|
|
147
|
+
- Ensure all color codes are accurate
|
|
148
|
+
- Use evocative, designer-friendly language
|
|
149
|
+
|
|
150
|
+
## Best Practices
|
|
151
|
+
|
|
152
|
+
- **Be Descriptive:** Avoid generic terms like "blue" or "rounded." Use "Ocean-deep Cerulean (#0077B6)" or "Gently curved edges"
|
|
153
|
+
- **Be Functional:** Always explain what each design element is used for
|
|
154
|
+
- **Be Consistent:** Use the same terminology throughout the document
|
|
155
|
+
- **Be Visual:** Help readers visualize the design through your descriptions
|
|
156
|
+
- **Be Precise:** Include exact values (hex codes, pixel values) in parentheses after natural language descriptions
|
|
157
|
+
|
|
158
|
+
## Tips for Success
|
|
159
|
+
|
|
160
|
+
1. **Start with the big picture:** Understand the overall aesthetic before diving into details
|
|
161
|
+
2. **Look for patterns:** Identify consistent spacing, sizing, and styling patterns
|
|
162
|
+
3. **Think semantically:** Name colors by their purpose, not just their appearance
|
|
163
|
+
4. **Consider hierarchy:** Document how visual weight and importance are communicated
|
|
164
|
+
5. **Reference the guide:** Use language and patterns from the Stitch Effective Prompting Guide
|
|
165
|
+
|
|
166
|
+
## Common Pitfalls to Avoid
|
|
167
|
+
|
|
168
|
+
- ❌ Using technical jargon without translation (e.g., "rounded-xl" instead of "generously rounded corners")
|
|
169
|
+
- ❌ Omitting color codes or using only descriptive names
|
|
170
|
+
- ❌ Forgetting to explain functional roles of design elements
|
|
171
|
+
- ❌ Being too vague in atmosphere descriptions
|
|
172
|
+
- ❌ Ignoring subtle design details like shadows or spacing patterns
|
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
# Design System: Furniture Collections List
|
|
2
|
+
**Project ID:** 13534454087919359824
|
|
3
|
+
|
|
4
|
+
## 1. Visual Theme & Atmosphere
|
|
5
|
+
|
|
6
|
+
The Furniture Collections List embodies a **sophisticated, minimalist sanctuary** that marries the pristine simplicity of Scandinavian design with the refined visual language of luxury editorial presentation. The interface feels **spacious and tranquil**, prioritizing breathing room and visual clarity above all else. The design philosophy is gallery-like and photography-first, allowing each furniture piece to command attention as an individual art object.
|
|
7
|
+
|
|
8
|
+
The overall mood is **airy yet grounded**, creating an aspirational aesthetic that remains approachable and welcoming. The interface feels **utilitarian in its restraint** but elegant in its execution, with every element serving a clear purpose while maintaining visual sophistication. The atmosphere evokes the serene ambiance of a high-end furniture showroom where customers can browse thoughtfully without visual overwhelm.
|
|
9
|
+
|
|
10
|
+
**Key Characteristics:**
|
|
11
|
+
- Expansive whitespace creating generous breathing room between elements
|
|
12
|
+
- Clean, architectural grid system with structured content blocks
|
|
13
|
+
- Photography-first presentation with minimal UI interference
|
|
14
|
+
- Whisper-soft visual hierarchy that guides without shouting
|
|
15
|
+
- Refined, understated interactive elements
|
|
16
|
+
- Professional yet inviting editorial tone
|
|
17
|
+
|
|
18
|
+
## 2. Color Palette & Roles
|
|
19
|
+
|
|
20
|
+
### Primary Foundation
|
|
21
|
+
- **Warm Barely-There Cream** (#FCFAFA) – Primary background color. Creates an almost imperceptible warmth that feels more inviting than pure white, serving as the serene canvas for the entire experience.
|
|
22
|
+
- **Crisp Very Light Gray** (#F5F5F5) – Secondary surface color used for card backgrounds and content areas. Provides subtle visual separation while maintaining the airy, ethereal quality.
|
|
23
|
+
|
|
24
|
+
### Accent & Interactive
|
|
25
|
+
- **Deep Muted Teal-Navy** (#294056) – The sole vibrant accent in the palette. Used exclusively for primary call-to-action buttons (e.g., "Shop Now", "View all products"), active navigation links, selected filter states, and subtle interaction highlights. This sophisticated anchor color creates visual focus points without disrupting the serene neutral foundation.
|
|
26
|
+
|
|
27
|
+
### Typography & Text Hierarchy
|
|
28
|
+
- **Charcoal Near-Black** (#2C2C2C) – Primary text color for headlines and product names. Provides strong readable contrast while being softer and more refined than pure black.
|
|
29
|
+
- **Soft Warm Gray** (#6B6B6B) – Secondary text used for body copy, product descriptions, and supporting metadata. Creates clear typographic hierarchy without harsh contrast.
|
|
30
|
+
- **Ultra-Soft Silver Gray** (#E0E0E0) – Tertiary color for borders, dividers, and subtle structural elements. Creates separation so gentle it's almost imperceptible.
|
|
31
|
+
|
|
32
|
+
### Functional States (Reserved for system feedback)
|
|
33
|
+
- **Success Moss** (#10B981) – Stock availability, confirmation states, positive indicators
|
|
34
|
+
- **Alert Terracotta** (#EF4444) – Low stock warnings, error states, critical alerts
|
|
35
|
+
- **Informational Slate** (#64748B) – Neutral system messages, informational callouts
|
|
36
|
+
|
|
37
|
+
## 3. Typography Rules
|
|
38
|
+
|
|
39
|
+
**Primary Font Family:** Manrope
|
|
40
|
+
**Character:** Modern, geometric sans-serif with gentle humanist warmth. Slightly rounded letterforms that feel contemporary yet approachable.
|
|
41
|
+
|
|
42
|
+
### Hierarchy & Weights
|
|
43
|
+
- **Display Headlines (H1):** Semi-bold weight (600), generous letter-spacing (0.02em for elegance), 2.75-3.5rem size. Used sparingly for hero sections and major page titles.
|
|
44
|
+
- **Section Headers (H2):** Semi-bold weight (600), subtle letter-spacing (0.01em), 2-2.5rem size. Establishes clear content zones and featured collections.
|
|
45
|
+
- **Subsection Headers (H3):** Medium weight (500), normal letter-spacing, 1.5-1.75rem size. Product names and category labels.
|
|
46
|
+
- **Body Text:** Regular weight (400), relaxed line-height (1.7), 1rem size. Descriptions and supporting content prioritize comfortable readability.
|
|
47
|
+
- **Small Text/Meta:** Regular weight (400), slightly tighter line-height (1.5), 0.875rem size. Prices, availability, and metadata remain legible but visually recessive.
|
|
48
|
+
- **CTA Buttons:** Medium weight (500), subtle letter-spacing (0.01em), 1rem size. Balanced presence without visual aggression.
|
|
49
|
+
|
|
50
|
+
### Spacing Principles
|
|
51
|
+
- Headers use slightly expanded letter-spacing for refined elegance
|
|
52
|
+
- Body text maintains generous line-height (1.7) for effortless reading
|
|
53
|
+
- Consistent vertical rhythm with 2-3rem between related text blocks
|
|
54
|
+
- Large margins (4-6rem) between major sections to reinforce spaciousness
|
|
55
|
+
|
|
56
|
+
## 4. Component Stylings
|
|
57
|
+
|
|
58
|
+
### Buttons
|
|
59
|
+
- **Shape:** Subtly rounded corners (8px/0.5rem radius) – approachable and modern without appearing playful or childish
|
|
60
|
+
- **Primary CTA:** Deep Muted Teal-Navy (#294056) background with pure white text, comfortable padding (0.875rem vertical, 2rem horizontal)
|
|
61
|
+
- **Hover State:** Subtle darkening to deeper navy, smooth 250ms ease-in-out transition
|
|
62
|
+
- **Focus State:** Soft outer glow in the primary color for keyboard navigation accessibility
|
|
63
|
+
- **Secondary CTA (if needed):** Outlined style with Deep Muted Teal-Navy border, transparent background, hover fills with whisper-soft teal tint
|
|
64
|
+
|
|
65
|
+
### Cards & Product Containers
|
|
66
|
+
- **Corner Style:** Gently rounded corners (12px/0.75rem radius) creating soft, refined edges
|
|
67
|
+
- **Background:** Alternates between Warm Barely-There Cream and Crisp Very Light Gray based on layering needs
|
|
68
|
+
- **Shadow Strategy:** Flat by default. On hover, whisper-soft diffused shadow appears (`0 2px 8px rgba(0,0,0,0.06)`) creating subtle depth
|
|
69
|
+
- **Border:** Optional hairline border (1px) in Ultra-Soft Silver Gray for delicate definition when shadows aren't present
|
|
70
|
+
- **Internal Padding:** Generous 2-2.5rem creating comfortable breathing room for content
|
|
71
|
+
- **Image Treatment:** Full-bleed at the top of cards, square or 4:3 ratio, seamless edge-to-edge presentation
|
|
72
|
+
|
|
73
|
+
### Navigation
|
|
74
|
+
- **Style:** Clean horizontal layout with generous spacing (2-3rem) between menu items
|
|
75
|
+
- **Typography:** Medium weight (500), subtle uppercase, expanded letter-spacing (0.06em) for refined sophistication
|
|
76
|
+
- **Default State:** Charcoal Near-Black text
|
|
77
|
+
- **Active/Hover State:** Smooth 200ms color transition to Deep Muted Teal-Navy
|
|
78
|
+
- **Active Indicator:** Thin underline (2px) in Deep Muted Teal-Navy appearing below current section
|
|
79
|
+
- **Mobile:** Converts to elegant hamburger menu with sliding drawer
|
|
80
|
+
|
|
81
|
+
### Inputs & Forms
|
|
82
|
+
- **Stroke Style:** Refined 1px border in Soft Warm Gray
|
|
83
|
+
- **Background:** Warm Barely-There Cream with transition to Crisp Very Light Gray on focus
|
|
84
|
+
- **Corner Style:** Matching button roundness (8px/0.5rem) for visual consistency
|
|
85
|
+
- **Focus State:** Border color shifts to Deep Muted Teal-Navy with subtle outer glow
|
|
86
|
+
- **Padding:** Comfortable 0.875rem vertical, 1.25rem horizontal for touch-friendly targets
|
|
87
|
+
- **Placeholder Text:** Ultra-Soft Silver Gray, elegant and unobtrusive
|
|
88
|
+
|
|
89
|
+
### Product Cards (Specific Pattern)
|
|
90
|
+
- **Image Area:** Square (1:1) or landscape (4:3) ratio filling card width completely
|
|
91
|
+
- **Content Stack:** Product name (H3), brief descriptor, material/finish, price
|
|
92
|
+
- **Price Display:** Emphasized with semi-bold weight (600) in Charcoal Near-Black
|
|
93
|
+
- **Hover Behavior:** Gentle lift effect (translateY -4px) combined with enhanced shadow
|
|
94
|
+
- **Spacing:** Consistent 1.5rem internal padding below image
|
|
95
|
+
|
|
96
|
+
## 5. Layout Principles
|
|
97
|
+
|
|
98
|
+
### Grid & Structure
|
|
99
|
+
- **Max Content Width:** 1440px for optimal readability and visual balance on large displays
|
|
100
|
+
- **Grid System:** Responsive 12-column grid with fluid gutters (24px mobile, 32px desktop)
|
|
101
|
+
- **Product Grid:** 4 columns on large desktop, 3 on desktop, 2 on tablet, 1 on mobile
|
|
102
|
+
- **Breakpoints:**
|
|
103
|
+
- Mobile: <768px
|
|
104
|
+
- Tablet: 768-1024px
|
|
105
|
+
- Desktop: 1024-1440px
|
|
106
|
+
- Large Desktop: >1440px
|
|
107
|
+
|
|
108
|
+
### Whitespace Strategy (Critical to the Design)
|
|
109
|
+
- **Base Unit:** 8px for micro-spacing, 16px for component spacing
|
|
110
|
+
- **Vertical Rhythm:** Consistent 2rem (32px) base unit between related elements
|
|
111
|
+
- **Section Margins:** Generous 5-8rem (80-128px) between major sections creating dramatic breathing room
|
|
112
|
+
- **Edge Padding:** 1.5rem (24px) mobile, 3rem (48px) tablet/desktop for comfortable framing
|
|
113
|
+
- **Hero Sections:** Extra-generous top/bottom padding (8-12rem) for impactful presentation
|
|
114
|
+
|
|
115
|
+
### Alignment & Visual Balance
|
|
116
|
+
- **Text Alignment:** Left-aligned for body and navigation (optimal readability), centered for hero headlines and featured content
|
|
117
|
+
- **Image to Text Ratio:** Heavily weighted toward imagery (70-30 split) reinforcing photography-first philosophy
|
|
118
|
+
- **Asymmetric Balance:** Large hero images offset by compact, refined text blocks
|
|
119
|
+
- **Visual Weight Distribution:** Strategic use of whitespace to draw eyes to hero products and primary CTAs
|
|
120
|
+
- **Reading Flow:** Clear top-to-bottom, left-to-right pattern with intentional focal points
|
|
121
|
+
|
|
122
|
+
### Responsive Behavior & Touch
|
|
123
|
+
- **Mobile-First Foundation:** Core experience designed and perfected for smallest screens first
|
|
124
|
+
- **Progressive Enhancement:** Additional columns, imagery, and details added gracefully at larger breakpoints
|
|
125
|
+
- **Touch Targets:** Minimum 44x44px for all interactive elements (WCAG AAA compliant)
|
|
126
|
+
- **Image Optimization:** Responsive images with appropriate resolutions for each breakpoint, lazy-loading for performance
|
|
127
|
+
- **Collapsing Strategy:** Navigation collapses to hamburger, grid reduces columns, padding scales proportionally
|
|
128
|
+
|
|
129
|
+
## 6. Design System Notes for Stitch Generation
|
|
130
|
+
|
|
131
|
+
When creating new screens for this project using Stitch, reference these specific instructions:
|
|
132
|
+
|
|
133
|
+
### Language to Use
|
|
134
|
+
- **Atmosphere:** "Sophisticated minimalist sanctuary with gallery-like spaciousness"
|
|
135
|
+
- **Button Shapes:** "Subtly rounded corners" (not "rounded-md" or "8px")
|
|
136
|
+
- **Shadows:** "Whisper-soft diffused shadows on hover" (not "shadow-sm")
|
|
137
|
+
- **Spacing:** "Generous breathing room" and "expansive whitespace"
|
|
138
|
+
|
|
139
|
+
### Color References
|
|
140
|
+
Always use the descriptive names with hex codes:
|
|
141
|
+
- Primary CTA: "Deep Muted Teal-Navy (#294056)"
|
|
142
|
+
- Backgrounds: "Warm Barely-There Cream (#FCFAFA)" or "Crisp Very Light Gray (#F5F5F5)"
|
|
143
|
+
- Text: "Charcoal Near-Black (#2C2C2C)" or "Soft Warm Gray (#6B6B6B)"
|
|
144
|
+
|
|
145
|
+
### Component Prompts
|
|
146
|
+
- "Create a product card with gently rounded corners, full-bleed square product image, and whisper-soft shadow on hover"
|
|
147
|
+
- "Design a primary call-to-action button in Deep Muted Teal-Navy (#294056) with subtle rounded corners and comfortable padding"
|
|
148
|
+
- "Add a navigation bar with generous spacing between items, using medium-weight Manrope with subtle uppercase and expanded letter-spacing"
|
|
149
|
+
|
|
150
|
+
### Incremental Iteration
|
|
151
|
+
When refining existing screens:
|
|
152
|
+
1. Focus on ONE component at a time (e.g., "Update the product grid cards")
|
|
153
|
+
2. Be specific about what to change (e.g., "Increase the internal padding of product cards from 1.5rem to 2rem")
|
|
154
|
+
3. Reference this design system language consistently
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 fireworks-tech-graph contributors
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|