Skip to content

feat(core): inline iOS frame starter template #82

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hqhq1025 merged 1 commit into from
Apr 19, 2026
Merged

feat(core): inline iOS frame starter template #82

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions packages/core/src/generate.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -646,6 +646,26 @@ describe('composeSystemPrompt()', () => {
expect(prompt).toContain('Customer quotes deserve distinguished treatment');
expect(prompt).toContain('Single-page structure ladder');
});

it('create mode embeds iOS frame starter template', () => {
const prompt = composeSystemPrompt({ mode: 'create' });
expect(prompt).toContain('iOS frame starter');
expect(prompt).toContain('.ios-status-bar');
expect(prompt).toContain('ios-dynamic-island');
expect(prompt).toContain('ios-home-indicator');
});

it('tweak mode does not include iOS frame starter template', () => {
const prompt = composeSystemPrompt({ mode: 'tweak' });
expect(prompt).not.toContain('iOS frame starter');
expect(prompt).not.toContain('.ios-status-bar');
});

it('revise mode does not include iOS frame starter template', () => {
const prompt = composeSystemPrompt({ mode: 'revise' });
expect(prompt).not.toContain('iOS frame starter');
expect(prompt).not.toContain('.ios-status-bar');
});
});

describe('prompt section .txt vs TS drift', () => {
Expand Down
84 changes: 83 additions & 1 deletion packages/core/src/prompts/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -533,6 +533,82 @@ Before writing any HTML, answer the following questions to yourself. Do NOT prin

If any answer is "I'm not sure" or "default", redesign the answer before generating. Sparse + generic is the failure mode this checklist exists to prevent.`;

const IOS_STARTER_TEMPLATE = `# iOS frame starter template

When the user requests a mobile / iOS / iPhone screen ("mobile prototype", "App design", "iOS UI", "手机", "移动端"), use this exact iPhone 14 Pro frame as your starting structural skeleton, then design within \`<main class="ios-screen">\`.

DO NOT modify the frame skeleton (status bar, dynamic island, home indicator). DO add your design inside \`<main>\`.

\`\`\`html
<!doctype html>
<html lang="zh">
Copy link
Copy Markdown
Contributor

@github-actions github-actions Bot Apr 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[Minor] <html lang="zh"> 会把非中文请求也固定为中文语言标记。建议改为 lang="en" 作为中性默认，或在模板中明确要求按用户输入语言设置 lang。

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #f5f5f7; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'PingFang SC', sans-serif; -webkit-font-smoothing: antialiased; }
Copy link
Copy Markdown
Contributor

@github-actions github-actions Bot Apr 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[Major] 这里开始的 iOS skeleton 使用了多处硬编码视觉值（颜色/字体），且上文要求 "exact skeleton"，与同一 system prompt 里要求 token 化/变量化的输出规则形成冲突。建议保持几何尺寸不变，但将视觉值改为 :root 变量并在 skeleton 中引用。

.ios-status-bar {
height: 54px;
padding: 18px 28px 0;
display: flex; align-items: center; justify-content: space-between;
font-size: 17px; font-weight: 600; color: #000;
position: sticky; top: 0; z-index: 100;
background: inherit;
}
.ios-status-bar .time { font-variant-numeric: tabular-nums; }
.ios-status-bar .icons { display: flex; gap: 6px; align-items: center; }
.ios-status-bar .icons svg { display: block; }
.ios-dynamic-island {
position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
width: 124px; height: 36px;
background: #000; border-radius: 999px;
z-index: 200;
}
.ios-screen {
/* Your design lives here. Default white; override as needed. */
background: #ffffff;
min-height: calc(100vh - 54px - 34px);
padding: 0;
overflow-y: auto;
}
.ios-home-indicator {
height: 34px;
display: flex; align-items: center; justify-content: center;
position: sticky; bottom: 0;
background: inherit;
}
.ios-home-indicator::after {
content: ''; width: 134px; height: 5px; border-radius: 999px; background: #000;
}
</style>
</head>
<body>
<div class="ios-dynamic-island"></div>
<header class="ios-status-bar">
<span class="time">9:41</span>
<span class="icons" aria-hidden="true">
<svg width="18" height="12" viewBox="0 0 18 12" fill="currentColor"><rect x="0" y="8" width="3" height="4" rx="0.5"/><rect x="5" y="5" width="3" height="7" rx="0.5"/><rect x="10" y="2" width="3" height="10" rx="0.5"/><rect x="15" y="0" width="3" height="12" rx="0.5"/></svg>
<svg width="16" height="12" viewBox="0 0 16 12" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M1 4.5C3 2 5.5 1 8 1s5 1 7 3.5"/><path d="M3 7c1.5-1.5 3-2 5-2s3.5.5 5 2"/><path d="M5 9.5c1-1 1.8-1.3 3-1.3s2 0.3 3 1.3"/><circle cx="8" cy="11" r="0.7" fill="currentColor"/></svg>
<svg width="26" height="12" viewBox="0 0 26 12" fill="none" stroke="currentColor" stroke-width="1.2"><rect x="0.5" y="0.5" width="22" height="11" rx="3"/><rect x="2.5" y="2.5" width="18" height="7" rx="1.5" fill="currentColor"/><rect x="23" y="3.5" width="2" height="5" rx="0.5" fill="currentColor"/></svg>
</span>
</header>
<main class="ios-screen">
<!--
Your design goes here. Use mobile-appropriate spacing (16-20px side padding),
44pt touch targets, and the .ios-screen background as your canvas.
Override .ios-screen { background: ... } if you want a non-white screen.
-->
</main>
<footer class="ios-home-indicator"></footer>
</body>
</html>
\`\`\`

After copying this skeleton, design your app's specific UI inside \`<main class="ios-screen">\`. Use the craft directives, density floor, and design system the user provides — but keep the iOS chrome (status bar, dynamic island, home indicator) untouched.

If the user requests Android instead, swap to a 360×800 viewport with Material Design status bar (height 24dp) and gesture nav (height 16dp) — use Material color tokens.`;

// ---------------------------------------------------------------------------
// Section maps (used by drift tests and tooling)
// ---------------------------------------------------------------------------
Expand All @@ -546,6 +622,7 @@ export const PROMPT_SECTIONS: Record<string, string> = {
preFlight: PRE_FLIGHT,
tweaksProtocol: TWEAKS_PROTOCOL,
craftDirectives: CRAFT_DIRECTIVES,
iosStarterTemplate: IOS_STARTER_TEMPLATE,
antiSlop: ANTI_SLOP,
safety: SAFETY,
};
Expand All @@ -559,6 +636,7 @@ export const PROMPT_SECTION_FILES: Record<keyof typeof PROMPT_SECTIONS, string>
preFlight: 'pre-flight.v1.txt',
tweaksProtocol: 'tweaks-protocol.v1.txt',
craftDirectives: 'craft-directives.v1.txt',
iosStarterTemplate: 'ios-starter-template.v1.txt',
antiSlop: 'anti-slop.v1.txt',
safety: 'safety.v1.txt',
};
Expand Down Expand Up @@ -589,7 +667,8 @@ export interface PromptComposeOptions {
* Section order:
* identity → workflow → output-rules → design-methodology →
* artifact-types → pre-flight → [tweaks-protocol if mode === 'tweak'] →
* craft-directives → anti-slop → safety → [skill blobs if any]
* craft-directives → [ios-starter-template if mode === 'create'] →
* anti-slop → safety → [skill blobs if any]
*
* Brand tokens and other user-filesystem data are intentionally excluded here.
* They are passed as untrusted user-role content in the message array to prevent
Expand All @@ -612,6 +691,9 @@ export function composeSystemPrompt(opts: PromptComposeOptions): string {
if (opts.mode !== 'tweak') {
sections.push(CRAFT_DIRECTIVES);
}
if (opts.mode === 'create') {
sections.push(IOS_STARTER_TEMPLATE);
}
sections.push(ANTI_SLOP);
sections.push(SAFETY);

Expand Down
75 changes: 75 additions & 0 deletions packages/core/src/prompts/ios-starter-template.v1.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
# iOS frame starter template

When the user requests a mobile / iOS / iPhone screen ("mobile prototype", "App design", "iOS UI", "手机", "移动端"), use this exact iPhone 14 Pro frame as your starting structural skeleton, then design within `<main class="ios-screen">`.

DO NOT modify the frame skeleton (status bar, dynamic island, home indicator). DO add your design inside `<main>`.

```html
<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #f5f5f7; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'PingFang SC', sans-serif; -webkit-font-smoothing: antialiased; }
.ios-status-bar {
height: 54px;
padding: 18px 28px 0;
display: flex; align-items: center; justify-content: space-between;
font-size: 17px; font-weight: 600; color: #000;
position: sticky; top: 0; z-index: 100;
background: inherit;
}
.ios-status-bar .time { font-variant-numeric: tabular-nums; }
.ios-status-bar .icons { display: flex; gap: 6px; align-items: center; }
.ios-status-bar .icons svg { display: block; }
.ios-dynamic-island {
position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
width: 124px; height: 36px;
background: #000; border-radius: 999px;
z-index: 200;
}
.ios-screen {
/* Your design lives here. Default white; override as needed. */
background: #ffffff;
min-height: calc(100vh - 54px - 34px);
padding: 0;
overflow-y: auto;
}
.ios-home-indicator {
height: 34px;
display: flex; align-items: center; justify-content: center;
position: sticky; bottom: 0;
background: inherit;
}
.ios-home-indicator::after {
content: ''; width: 134px; height: 5px; border-radius: 999px; background: #000;
}
</style>
</head>
<body>
<div class="ios-dynamic-island"></div>
<header class="ios-status-bar">
<span class="time">9:41</span>
<span class="icons" aria-hidden="true">
<svg width="18" height="12" viewBox="0 0 18 12" fill="currentColor"><rect x="0" y="8" width="3" height="4" rx="0.5"/><rect x="5" y="5" width="3" height="7" rx="0.5"/><rect x="10" y="2" width="3" height="10" rx="0.5"/><rect x="15" y="0" width="3" height="12" rx="0.5"/></svg>
<svg width="16" height="12" viewBox="0 0 16 12" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M1 4.5C3 2 5.5 1 8 1s5 1 7 3.5"/><path d="M3 7c1.5-1.5 3-2 5-2s3.5.5 5 2"/><path d="M5 9.5c1-1 1.8-1.3 3-1.3s2 0.3 3 1.3"/><circle cx="8" cy="11" r="0.7" fill="currentColor"/></svg>
<svg width="26" height="12" viewBox="0 0 26 12" fill="none" stroke="currentColor" stroke-width="1.2"><rect x="0.5" y="0.5" width="22" height="11" rx="3"/><rect x="2.5" y="2.5" width="18" height="7" rx="1.5" fill="currentColor"/><rect x="23" y="3.5" width="2" height="5" rx="0.5" fill="currentColor"/></svg>
</span>
</header>
<main class="ios-screen">
<!--
Your design goes here. Use mobile-appropriate spacing (16-20px side padding),
44pt touch targets, and the .ios-screen background as your canvas.
Override .ios-screen { background: ... } if you want a non-white screen.
-->
</main>
<footer class="ios-home-indicator"></footer>
</body>
</html>
```

After copying this skeleton, design your app's specific UI inside `<main class="ios-screen">`. Use the craft directives, density floor, and design system the user provides — but keep the iOS chrome (status bar, dynamic island, home indicator) untouched.

If the user requests Android instead, swap to a 360×800 viewport with Material Design status bar (height 24dp) and gesture nav (height 16dp) — use Material color tokens.
Loading