Add contributing guidelines in English and Chinese
- Introduced CONTRIBUTING.md and CONTRIBUTING.zh-CN.md to provide clear instructions for contributors. - Outlined contribution types, local setup instructions, and merging criteria for skills and design systems. - Enhanced README files to reference the new contributing guidelines.
This commit is contained in:
pftom
@@ -0,0 +1,381 @@
|
||||
<!doctype html>
|
||||
<html lang='en'>
|
||||
<head>
|
||||
<meta charset='utf-8' />
|
||||
<title>Open Design — cover</title>
|
||||
<link rel='preconnect' href='https://fonts.googleapis.com'>
|
||||
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
|
||||
<link href='https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,700;1,9..144,500;1,9..144,700&family=JetBrains+Mono:wght@400;500&family=Inter:wght@400;500&display=swap' rel='stylesheet'>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0d0a06;
|
||||
--bg-2: #14100a;
|
||||
--ink: #f3ead8;
|
||||
--muted: #9b8f78;
|
||||
--rule: #4a3f2c;
|
||||
--accent: #f0833f;
|
||||
--accent-2: #e85a2c;
|
||||
--paper: #f6efdd;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
background: var(--bg);
|
||||
color: var(--ink);
|
||||
font-family: 'Inter', -apple-system, system-ui, sans-serif;
|
||||
overflow: hidden;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
body {
|
||||
background:
|
||||
radial-gradient(1200px 700px at 78% 22%, rgba(240,131,63,0.12), transparent 70%),
|
||||
radial-gradient(900px 600px at 12% 80%, rgba(232,90,44,0.06), transparent 70%),
|
||||
linear-gradient(180deg, #0e0b07 0%, #0a0805 100%);
|
||||
padding: 56px 72px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: 'JetBrains Mono', ui-monospace, monospace;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
header {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
padding-bottom: 22px;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
}
|
||||
header .l { text-align: left; }
|
||||
header .r { text-align: right; }
|
||||
header .center {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
font-size: 22px;
|
||||
color: var(--ink);
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
header .center .dot {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
margin: 0 8px 4px 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 1.05fr 1fr;
|
||||
column-gap: 64px;
|
||||
padding-top: 56px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
.eyebrow .pill {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.22em;
|
||||
color: #f6e9d4;
|
||||
background: rgba(240,131,63,0.16);
|
||||
border: 1px solid rgba(240,131,63,0.45);
|
||||
padding: 6px 12px;
|
||||
border-radius: 999px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.eyebrow .pill.alt {
|
||||
color: var(--muted);
|
||||
background: transparent;
|
||||
border-color: var(--rule);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-weight: 500;
|
||||
font-size: 116px;
|
||||
line-height: 0.94;
|
||||
letter-spacing: -0.025em;
|
||||
color: var(--ink);
|
||||
margin: 0 0 36px 0;
|
||||
}
|
||||
h1 em {
|
||||
font-style: italic;
|
||||
color: var(--accent);
|
||||
font-weight: 500;
|
||||
}
|
||||
h1 .small {
|
||||
font-size: 96px;
|
||||
}
|
||||
|
||||
.lede {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-weight: 300;
|
||||
font-size: 22px;
|
||||
line-height: 1.5;
|
||||
color: #d8cdb6;
|
||||
max-width: 640px;
|
||||
margin: 0 0 32px 0;
|
||||
}
|
||||
.lede b {
|
||||
font-weight: 500;
|
||||
color: #f3ead8;
|
||||
}
|
||||
|
||||
.meta {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 0;
|
||||
border-top: 1px solid var(--rule);
|
||||
padding-top: 22px;
|
||||
}
|
||||
.meta .cell {
|
||||
border-right: 1px solid var(--rule);
|
||||
padding-right: 18px;
|
||||
}
|
||||
.meta .cell:last-child { border-right: none; }
|
||||
.meta .num {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-weight: 500;
|
||||
font-size: 42px;
|
||||
line-height: 1;
|
||||
color: var(--ink);
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.meta .num em {
|
||||
font-style: italic;
|
||||
color: var(--accent);
|
||||
font-weight: 500;
|
||||
}
|
||||
.meta .lbl {
|
||||
margin-top: 10px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 10.5px;
|
||||
letter-spacing: 0.18em;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* right artifact collage */
|
||||
.right {
|
||||
position: relative;
|
||||
}
|
||||
.stage {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
.card {
|
||||
position: absolute;
|
||||
border-radius: 18px;
|
||||
overflow: hidden;
|
||||
background: #1a140d;
|
||||
box-shadow:
|
||||
0 1px 0 rgba(255,255,255,0.04) inset,
|
||||
0 24px 60px rgba(0,0,0,0.55),
|
||||
0 6px 18px rgba(0,0,0,0.45);
|
||||
border: 1px solid rgba(255,255,255,0.06);
|
||||
}
|
||||
.card img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
.card .tag {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 14px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: #ffd9b6;
|
||||
background: rgba(20, 14, 8, 0.7);
|
||||
padding: 6px 10px;
|
||||
border-radius: 6px;
|
||||
backdrop-filter: blur(6px);
|
||||
-webkit-backdrop-filter: blur(6px);
|
||||
border: 1px solid rgba(255,217,182,0.18);
|
||||
}
|
||||
|
||||
/* arrange three artifacts as an editorial collage */
|
||||
.card.a { /* gamified-app — back-left */
|
||||
width: 540px;
|
||||
height: 320px;
|
||||
top: 70px;
|
||||
right: 280px;
|
||||
transform: rotate(-3.5deg);
|
||||
}
|
||||
.card.b { /* digital-eguide — front-right hero */
|
||||
width: 620px;
|
||||
height: 360px;
|
||||
top: 220px;
|
||||
right: 0;
|
||||
transform: rotate(2.5deg);
|
||||
z-index: 3;
|
||||
}
|
||||
.card.c { /* dating-web — bottom-left */
|
||||
width: 520px;
|
||||
height: 300px;
|
||||
top: 460px;
|
||||
right: 230px;
|
||||
transform: rotate(-1.5deg);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* decorative marks */
|
||||
.mark-circle {
|
||||
position: absolute;
|
||||
top: 36px;
|
||||
right: 24px;
|
||||
width: 86px;
|
||||
height: 86px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle at 35% 30%, #ffb37a, var(--accent-2) 80%);
|
||||
color: #2a1408;
|
||||
font-family: 'Fraunces', serif;
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 1.15;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transform: rotate(8deg);
|
||||
box-shadow: 0 14px 30px rgba(232,90,44,0.45);
|
||||
z-index: 5;
|
||||
}
|
||||
.mark-circle span { padding: 0 10px; }
|
||||
|
||||
footer {
|
||||
margin-top: 48px;
|
||||
padding-top: 22px;
|
||||
border-top: 1px solid var(--rule);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
}
|
||||
footer .l { text-align: left; }
|
||||
footer .r { text-align: right; }
|
||||
footer .c {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.28em;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.underline-accent {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
.underline-accent::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -6px;
|
||||
height: 6px;
|
||||
background: var(--accent);
|
||||
border-radius: 4px;
|
||||
opacity: 0.85;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class='mono l'>Open Design · Manifesto · 2026 Edition</div>
|
||||
<div class='center'><span class='dot'></span>open.design</div>
|
||||
<div class='mono r'>Cover · 01 / 08 · OSS Alternative</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class='left'>
|
||||
<div>
|
||||
<div class='eyebrow'>
|
||||
<span class='pill'>· APACHE 2.0</span>
|
||||
<span class='pill alt'>Local-first · BYOK</span>
|
||||
</div>
|
||||
<h1>
|
||||
Design with the<br/>
|
||||
<em>agent</em> already<br/>
|
||||
<span class='small'>on your <span class='underline-accent'>laptop</span>.</span>
|
||||
</h1>
|
||||
<p class='lede'>
|
||||
Open Design is the open-source alternative to Claude Design.
|
||||
Your existing coding agent — <b>Claude Code · Codex · Cursor · Gemini · OpenCode · Qwen</b> —
|
||||
becomes the design engine, driven by 19 composable Skills and 71 brand-grade Design Systems.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class='meta'>
|
||||
<div class='cell'>
|
||||
<div class='num'>71</div>
|
||||
<div class='lbl'>Design<br/>Systems</div>
|
||||
</div>
|
||||
<div class='cell'>
|
||||
<div class='num'>19</div>
|
||||
<div class='lbl'>Composable<br/>Skills</div>
|
||||
</div>
|
||||
<div class='cell'>
|
||||
<div class='num'>06</div>
|
||||
<div class='lbl'>Coding<br/>Agents</div>
|
||||
</div>
|
||||
<div class='cell'>
|
||||
<div class='num'><em>0</em></div>
|
||||
<div class='lbl'>Lock-in /<br/>Vendor Cloud</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class='right'>
|
||||
<div class='stage'>
|
||||
<div class='card a'>
|
||||
<span class='tag'>· Hi-Fi Prototype · iPhone</span>
|
||||
<img src='../../screenshots/skills/gamified-app.png' alt=''>
|
||||
</div>
|
||||
<div class='card b'>
|
||||
<span class='tag'>· Digital E-guide · 64pp</span>
|
||||
<img src='../../screenshots/skills/digital-eguide.png' alt=''>
|
||||
</div>
|
||||
<div class='card c'>
|
||||
<span class='tag'>· Dating App · Web</span>
|
||||
<img src='../../screenshots/skills/dating-web.png' alt=''>
|
||||
</div>
|
||||
<div class='mark-circle'><span>OPEN<br/>SOURCE</span></div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class='mono l'>BYOK at every layer · No cloud lock-in</div>
|
||||
<div class='c'>· pnpm dev · vercel deploy · npm start ·</div>
|
||||
<div class='mono r'>github.com/open-design</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,520 @@
|
||||
<!doctype html>
|
||||
<html lang='en'>
|
||||
<head>
|
||||
<meta charset='utf-8' />
|
||||
<title>71 Design Systems — cover</title>
|
||||
<link rel='preconnect' href='https://fonts.googleapis.com'>
|
||||
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
|
||||
<link href='https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,700;1,9..144,500;1,9..144,700&family=JetBrains+Mono:wght@400;500&family=Inter:wght@400;500&display=swap' rel='stylesheet'>
|
||||
<style>
|
||||
:root {
|
||||
--surface: #d9c3bd;
|
||||
--surface-2: #e6d2cc;
|
||||
--paper: #f5ecd9;
|
||||
--paper-edge: #e8dcc4;
|
||||
--ink: #1c1814;
|
||||
--ink-soft: #4d4339;
|
||||
--muted: #8a7e70;
|
||||
--rule: #c8b9a1;
|
||||
--accent: #c44a3a;
|
||||
--accent-2: #d4593f;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
background: var(--surface);
|
||||
color: var(--ink);
|
||||
font-family: 'Inter', -apple-system, system-ui, sans-serif;
|
||||
overflow: hidden;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
body {
|
||||
background:
|
||||
radial-gradient(1100px 700px at 28% 12%, var(--surface-2), transparent 70%),
|
||||
radial-gradient(900px 600px at 88% 90%, #cab1aa, transparent 70%),
|
||||
var(--surface);
|
||||
padding: 60px 80px;
|
||||
display: flex;
|
||||
gap: 56px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.page {
|
||||
background: var(--paper);
|
||||
flex: 1;
|
||||
border-radius: 4px;
|
||||
padding: 56px 60px;
|
||||
box-shadow:
|
||||
0 0 0 1px var(--paper-edge),
|
||||
0 30px 60px rgba(60, 30, 24, 0.18),
|
||||
0 8px 22px rgba(60, 30, 24, 0.12);
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.page::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(28,24,20,0.04), transparent 8%, transparent 92%, rgba(28,24,20,0.05));
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: 'JetBrains Mono', ui-monospace, monospace;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.22em;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.pageHead {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 14px;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
}
|
||||
.dot {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
margin-right: 8px;
|
||||
vertical-align: middle;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* ---------- LEFT (cover) page ---------- */
|
||||
.cover h1 {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-weight: 500;
|
||||
font-size: 96px;
|
||||
line-height: 0.94;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--ink);
|
||||
margin: 64px 0 32px 0;
|
||||
}
|
||||
.cover h1 em {
|
||||
font-style: italic;
|
||||
color: var(--accent);
|
||||
font-weight: 500;
|
||||
}
|
||||
.cover .tagline {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
font-size: 22px;
|
||||
line-height: 1.45;
|
||||
color: var(--ink-soft);
|
||||
max-width: 480px;
|
||||
margin: 0 0 36px 0;
|
||||
}
|
||||
.byline {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.22em;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
padding: 14px 0;
|
||||
border-top: 1px solid var(--rule);
|
||||
border-bottom: 1px solid var(--rule);
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 0;
|
||||
margin-bottom: 44px;
|
||||
}
|
||||
.stats .cell { padding-right: 16px; }
|
||||
.stats .cell + .cell { border-left: 1px solid var(--rule); padding-left: 24px; }
|
||||
.stats .num {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-weight: 500;
|
||||
font-size: 64px;
|
||||
line-height: 1;
|
||||
color: var(--ink);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
.stats .num em { font-style: italic; color: var(--accent); }
|
||||
.stats .lbl {
|
||||
margin-top: 10px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.22em;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.toc-title {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-weight: 500;
|
||||
font-size: 32px;
|
||||
margin: 8px 0 18px 0;
|
||||
color: var(--ink);
|
||||
}
|
||||
.toc-title em { font-style: italic; color: var(--accent); }
|
||||
|
||||
.toc {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.toc-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
font-family: 'Fraunces', serif;
|
||||
font-size: 17px;
|
||||
color: var(--ink);
|
||||
}
|
||||
.toc-row .name { flex: 0 0 auto; }
|
||||
.toc-row .dots {
|
||||
flex: 1;
|
||||
border-bottom: 1px dotted #b6a487;
|
||||
margin: 0 10px;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
.toc-row .pg {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.18em;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.cover .footer {
|
||||
margin-top: auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-top: 1px solid var(--rule);
|
||||
padding-top: 14px;
|
||||
}
|
||||
|
||||
/* ---------- RIGHT (index) page ---------- */
|
||||
.index .h2 {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-weight: 500;
|
||||
font-size: 56px;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--ink);
|
||||
margin: 32px 0 12px 0;
|
||||
}
|
||||
.index .h2 em {
|
||||
font-style: italic;
|
||||
color: var(--accent);
|
||||
font-weight: 500;
|
||||
}
|
||||
.index .sub {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: var(--ink-soft);
|
||||
line-height: 1.5;
|
||||
max-width: 540px;
|
||||
margin: 0 0 28px 0;
|
||||
}
|
||||
.drop {
|
||||
float: left;
|
||||
font-family: 'Fraunces', serif;
|
||||
font-weight: 500;
|
||||
font-size: 76px;
|
||||
line-height: 0.85;
|
||||
color: var(--accent);
|
||||
margin: 8px 12px -4px 0;
|
||||
}
|
||||
.drop + p {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
color: var(--ink-soft);
|
||||
margin: 0 0 18px 0;
|
||||
}
|
||||
|
||||
.columns {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
column-gap: 36px;
|
||||
row-gap: 6px;
|
||||
margin: 18px 0 12px 0;
|
||||
border-top: 1px solid var(--rule);
|
||||
border-bottom: 1px solid var(--rule);
|
||||
padding: 14px 0;
|
||||
}
|
||||
.item {
|
||||
display: grid;
|
||||
grid-template-columns: 26px 1fr auto;
|
||||
align-items: baseline;
|
||||
gap: 10px;
|
||||
padding: 6px 0;
|
||||
font-family: 'Fraunces', serif;
|
||||
font-size: 16px;
|
||||
color: var(--ink);
|
||||
}
|
||||
.item .n {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--muted);
|
||||
}
|
||||
.item .swatch {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
transform: translateY(2px);
|
||||
margin-right: 6px;
|
||||
box-shadow: 0 0 0 1px rgba(0,0,0,0.08) inset;
|
||||
}
|
||||
.item .name { font-weight: 500; }
|
||||
.item .tag {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.16em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
.item.featured .name { color: var(--accent); font-style: italic; }
|
||||
|
||||
.spotlight {
|
||||
display: grid;
|
||||
grid-template-columns: 110px 1fr;
|
||||
gap: 18px;
|
||||
align-items: center;
|
||||
background: #f0e3c8;
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 6px;
|
||||
padding: 18px 20px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
.spotlight .swatches {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 6px;
|
||||
}
|
||||
.spotlight .sw {
|
||||
height: 28px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 0 1px rgba(0,0,0,0.06) inset;
|
||||
}
|
||||
.spotlight .label {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.18em;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.spotlight h3 {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
font-size: 22px;
|
||||
margin: 0 0 6px 0;
|
||||
color: var(--ink);
|
||||
}
|
||||
.spotlight h3 em { color: var(--accent); }
|
||||
.spotlight p {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: var(--ink-soft);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.index .footer {
|
||||
margin-top: auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-top: 1px solid var(--rule);
|
||||
padding-top: 14px;
|
||||
}
|
||||
|
||||
.stamp {
|
||||
position: absolute;
|
||||
top: 56px;
|
||||
right: 56px;
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
color: #fff5e9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
transform: rotate(8deg);
|
||||
font-family: 'Fraunces', serif;
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
font-size: 13px;
|
||||
line-height: 1.15;
|
||||
box-shadow: 0 12px 28px rgba(196,74,58,0.35);
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- LEFT PAGE: cover -->
|
||||
<article class='page cover'>
|
||||
<div class='pageHead'>
|
||||
<div class='mono'><span class='dot'></span>Style & Format Guide for Designers</div>
|
||||
<div class='mono'>2026 Edition</div>
|
||||
</div>
|
||||
|
||||
<h1>The <em>71</em><br/>Systems<br/>Library.</h1>
|
||||
<p class='tagline'>
|
||||
Linear, Stripe, Vercel, Airbnb, Tesla, Notion, Anthropic, Apple, Cursor, Supabase, Figma —
|
||||
seventy-one brand-grade systems, one open library, zero lock-in.
|
||||
</p>
|
||||
<div class='byline'>By Open Design · Maintained on GitHub · 19 / 04 / 2026</div>
|
||||
|
||||
<div class='stats'>
|
||||
<div class='cell'>
|
||||
<div class='num'>71</div>
|
||||
<div class='lbl'>Design<br/>Systems</div>
|
||||
</div>
|
||||
<div class='cell'>
|
||||
<div class='num'>19</div>
|
||||
<div class='lbl'>Composable<br/>Skills</div>
|
||||
</div>
|
||||
<div class='cell'>
|
||||
<div class='num'><em>1</em></div>
|
||||
<div class='lbl'>Library, zero<br/>vendor cloud</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class='toc-title'>What's <em>inside</em>.</h2>
|
||||
<div class='toc'>
|
||||
<div class='toc-row'><span class='name'>Tokens, palettes, motion</span><span class='dots'></span><span class='pg'>04</span></div>
|
||||
<div class='toc-row'><span class='name'>Pick a direction</span><span class='dots'></span><span class='pg'>12</span></div>
|
||||
<div class='toc-row'><span class='name'>Tone & typography</span><span class='dots'></span><span class='pg'>18</span></div>
|
||||
<div class='toc-row'><span class='name'>71 systems index</span><span class='dots'></span><span class='pg'>24</span></div>
|
||||
<div class='toc-row'><span class='name'>Bring-your-own-key</span><span class='dots'></span><span class='pg'>40</span></div>
|
||||
<div class='toc-row'><span class='name'>The anti-AI-slop checklist</span><span class='dots'></span><span class='pg'>52</span></div>
|
||||
</div>
|
||||
|
||||
<div class='footer'>
|
||||
<div class='mono'>Tokens, palettes & type</div>
|
||||
<div class='mono'>01 / 64</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- RIGHT PAGE: index -->
|
||||
<article class='page index'>
|
||||
<div class='pageHead'>
|
||||
<div class='mono'><span class='dot'></span>Chapter 02 · Index</div>
|
||||
<div class='mono'>71 entries · A → Z</div>
|
||||
</div>
|
||||
|
||||
<h2 class='h2'>All systems —<br/><em>one library.</em></h2>
|
||||
<p class='sub'>
|
||||
Every system ships a deterministic OKLch palette, a font stack, and a tone profile.
|
||||
Pick one tile and the agent inherits the whole brand.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<span class='drop'>S</span>
|
||||
eventy-one product systems, two hand-authored starters, five visual directions. Imported and curated
|
||||
from awesome-design-md, hand-tuned for Open Design's discovery loop. Drop one in,
|
||||
every artifact downstream changes accordingly — no model freestyle.
|
||||
</p>
|
||||
|
||||
<div class='columns'>
|
||||
<div class='item featured'>
|
||||
<span class='n'>03</span>
|
||||
<span><span class='swatch' style='background:#5e6ad2'></span><span class='name'>Linear</span></span>
|
||||
<span class='tag'>· graphite · violet</span>
|
||||
</div>
|
||||
<div class='item'>
|
||||
<span class='n'>07</span>
|
||||
<span><span class='swatch' style='background:#635bff'></span><span class='name'>Stripe</span></span>
|
||||
<span class='tag'>· payments · indigo</span>
|
||||
</div>
|
||||
<div class='item'>
|
||||
<span class='n'>09</span>
|
||||
<span><span class='swatch' style='background:#000000'></span><span class='name'>Vercel</span></span>
|
||||
<span class='tag'>· void · grayscale</span>
|
||||
</div>
|
||||
<div class='item'>
|
||||
<span class='n'>14</span>
|
||||
<span><span class='swatch' style='background:#ff385c'></span><span class='name'>Airbnb</span></span>
|
||||
<span class='tag'>· rausch · rounded</span>
|
||||
</div>
|
||||
<div class='item'>
|
||||
<span class='n'>18</span>
|
||||
<span><span class='swatch' style='background:#cc0000'></span><span class='name'>Tesla</span></span>
|
||||
<span class='tag'>· red · industrial</span>
|
||||
</div>
|
||||
<div class='item'>
|
||||
<span class='n'>22</span>
|
||||
<span><span class='swatch' style='background:#000000'></span><span class='name'>Notion</span></span>
|
||||
<span class='tag'>· paper · serif</span>
|
||||
</div>
|
||||
<div class='item'>
|
||||
<span class='n'>27</span>
|
||||
<span><span class='swatch' style='background:#cc785c'></span><span class='name'>Anthropic</span></span>
|
||||
<span class='tag'>· clay · serif</span>
|
||||
</div>
|
||||
<div class='item'>
|
||||
<span class='n'>31</span>
|
||||
<span><span class='swatch' style='background:#a8a8a8'></span><span class='name'>Apple</span></span>
|
||||
<span class='tag'>· chrome · sf pro</span>
|
||||
</div>
|
||||
<div class='item'>
|
||||
<span class='n'>34</span>
|
||||
<span><span class='swatch' style='background:#1a1a1a'></span><span class='name'>Cursor</span></span>
|
||||
<span class='tag'>· terminal · mono</span>
|
||||
</div>
|
||||
<div class='item'>
|
||||
<span class='n'>41</span>
|
||||
<span><span class='swatch' style='background:#3ecf8e'></span><span class='name'>Supabase</span></span>
|
||||
<span class='tag'>· emerald · rounded</span>
|
||||
</div>
|
||||
<div class='item'>
|
||||
<span class='n'>48</span>
|
||||
<span><span class='swatch' style='background:#0acf83'></span><span class='name'>Figma</span></span>
|
||||
<span class='tag'>· spectrum · canvas</span>
|
||||
</div>
|
||||
<div class='item'>
|
||||
<span class='n'>57</span>
|
||||
<span><span class='swatch' style='background:#000000'></span><span class='name'>OpenAI</span></span>
|
||||
<span class='tag'>· void · sober</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='spotlight'>
|
||||
<div class='swatches'>
|
||||
<span class='sw' style='background:#1c1816'></span>
|
||||
<span class='sw' style='background:#5e6ad2'></span>
|
||||
<span class='sw' style='background:#9b9bd6'></span>
|
||||
<span class='sw' style='background:#f3ead8'></span>
|
||||
</div>
|
||||
<div>
|
||||
<div class='label'>Spotlight · Linear · 03 / 71</div>
|
||||
<h3>Graphite + electric <em>violet.</em></h3>
|
||||
<p>IBM Plex Sans · Inter Display · 4-step OKLch palette · 16/24 grid · square radius. The agent inherits the full token tree the moment you tap the tile.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='footer'>
|
||||
<div class='mono'>Chapter 02 · Index</div>
|
||||
<div class='mono'>24 / 64</div>
|
||||
</div>
|
||||
|
||||
<div class='stamp'><span>71<br/>SYSTEMS</span></div>
|
||||
</article>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
+1
-1
@@ -11,7 +11,7 @@ Every external project this spec leans on. Three questions per entry: what is it
|
||||
### [Anthropic Claude Design][cd]
|
||||
- **URL:** [claude.ai/design][cd] · [release announcement](https://www.infoq.cn/article/TH0QVHpvVGZ7VP3hAEmm) · [ifanr review](https://www.ifanr.com/1662860)
|
||||
|
||||
[cd]: https://www.anthropic.com/news/claude-design
|
||||
[cd]: https://x.com/claudeai/status/2045156267690213649
|
||||
- **What it is:** Anthropic's closed-source AI design product. Released 2026-04-17. Powered by Opus 4.7. Web-only (claude.ai). Generates prototypes, wireframes, decks, marketing pages, complex prototypes with voice/video/3D/shaders.
|
||||
- **Why it matters to us:** Defines the category. Its viral moment (~60M X impressions week 1) proves the market.
|
||||
- **What we borrow:** The high-level value prop — "natural language → editable visual design." Feature inspiration for modes (prototype, deck, marketing). UI ideas around inline editing and custom sliders.
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
@@ -1,43 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid meet" role="img" aria-label="Entry view placeholder">
|
||||
<defs>
|
||||
<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FBF7EF"/>
|
||||
<stop offset="100%" stop-color="#EFE7D7"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="1600" height="900" fill="url(#bg)"/>
|
||||
<rect x="32" y="32" width="1536" height="836" rx="28" ry="28"
|
||||
fill="none" stroke="#C2532D" stroke-width="3" stroke-dasharray="16 12" opacity="0.85"/>
|
||||
<g transform="translate(800 390)" stroke="#1F1B16" stroke-width="6"
|
||||
stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.9">
|
||||
<rect x="-110" y="-72" width="220" height="144" rx="18"/>
|
||||
<rect x="-36" y="-94" width="72" height="26" rx="8"/>
|
||||
<circle r="42"/>
|
||||
<circle r="18"/>
|
||||
</g>
|
||||
<text x="800" y="480" text-anchor="middle"
|
||||
font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
|
||||
font-size="34" font-weight="600" letter-spacing="6" fill="#C2532D">
|
||||
01
|
||||
</text>
|
||||
<text x="800" y="560" text-anchor="middle"
|
||||
font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
|
||||
font-size="56" font-weight="700" fill="#1F1B16">
|
||||
Entry view
|
||||
</text>
|
||||
<text x="800" y="625" text-anchor="middle"
|
||||
font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
|
||||
font-size="26" fill="#6B6258">
|
||||
docs/screenshots/01-entry-view.svg
|
||||
</text>
|
||||
<text x="800" y="690" text-anchor="middle"
|
||||
font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
|
||||
font-size="24" fill="#6B6258">
|
||||
Pick skill · pick design system · write the brief.
|
||||
</text>
|
||||
<text x="800" y="844" text-anchor="middle"
|
||||
font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
|
||||
font-size="20" letter-spacing="4" fill="#6B6258" opacity="0.85">
|
||||
SCREENSHOT PENDING · 截图占位
|
||||
</text>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
@@ -1,43 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid meet" role="img" aria-label="Discovery form placeholder">
|
||||
<defs>
|
||||
<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FBF7EF"/>
|
||||
<stop offset="100%" stop-color="#EFE7D7"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="1600" height="900" fill="url(#bg)"/>
|
||||
<rect x="32" y="32" width="1536" height="836" rx="28" ry="28"
|
||||
fill="none" stroke="#C2532D" stroke-width="3" stroke-dasharray="16 12" opacity="0.85"/>
|
||||
<g transform="translate(800 390)" stroke="#1F1B16" stroke-width="6"
|
||||
stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.9">
|
||||
<rect x="-110" y="-72" width="220" height="144" rx="18"/>
|
||||
<rect x="-36" y="-94" width="72" height="26" rx="8"/>
|
||||
<circle r="42"/>
|
||||
<circle r="18"/>
|
||||
</g>
|
||||
<text x="800" y="480" text-anchor="middle"
|
||||
font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
|
||||
font-size="34" font-weight="600" letter-spacing="6" fill="#C2532D">
|
||||
02
|
||||
</text>
|
||||
<text x="800" y="560" text-anchor="middle"
|
||||
font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
|
||||
font-size="56" font-weight="700" fill="#1F1B16">
|
||||
Discovery form
|
||||
</text>
|
||||
<text x="800" y="625" text-anchor="middle"
|
||||
font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
|
||||
font-size="26" fill="#6B6258">
|
||||
docs/screenshots/02-question-form.svg
|
||||
</text>
|
||||
<text x="800" y="690" text-anchor="middle"
|
||||
font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
|
||||
font-size="24" fill="#6B6258">
|
||||
Turn-1 question form: surface · audience · tone · brand · scale.
|
||||
</text>
|
||||
<text x="800" y="844" text-anchor="middle"
|
||||
font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
|
||||
font-size="20" letter-spacing="4" fill="#6B6258" opacity="0.85">
|
||||
SCREENSHOT PENDING · 截图占位
|
||||
</text>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
@@ -1,43 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid meet" role="img" aria-label="Direction picker placeholder">
|
||||
<defs>
|
||||
<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FBF7EF"/>
|
||||
<stop offset="100%" stop-color="#EFE7D7"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="1600" height="900" fill="url(#bg)"/>
|
||||
<rect x="32" y="32" width="1536" height="836" rx="28" ry="28"
|
||||
fill="none" stroke="#C2532D" stroke-width="3" stroke-dasharray="16 12" opacity="0.85"/>
|
||||
<g transform="translate(800 390)" stroke="#1F1B16" stroke-width="6"
|
||||
stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.9">
|
||||
<rect x="-110" y="-72" width="220" height="144" rx="18"/>
|
||||
<rect x="-36" y="-94" width="72" height="26" rx="8"/>
|
||||
<circle r="42"/>
|
||||
<circle r="18"/>
|
||||
</g>
|
||||
<text x="800" y="480" text-anchor="middle"
|
||||
font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
|
||||
font-size="34" font-weight="600" letter-spacing="6" fill="#C2532D">
|
||||
03
|
||||
</text>
|
||||
<text x="800" y="560" text-anchor="middle"
|
||||
font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
|
||||
font-size="56" font-weight="700" fill="#1F1B16">
|
||||
Direction picker
|
||||
</text>
|
||||
<text x="800" y="625" text-anchor="middle"
|
||||
font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
|
||||
font-size="26" fill="#6B6258">
|
||||
docs/screenshots/03-direction-picker.svg
|
||||
</text>
|
||||
<text x="800" y="690" text-anchor="middle"
|
||||
font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
|
||||
font-size="24" fill="#6B6258">
|
||||
5 curated visual directions · deterministic palette + font stack.
|
||||
</text>
|
||||
<text x="800" y="844" text-anchor="middle"
|
||||
font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
|
||||
font-size="20" letter-spacing="4" fill="#6B6258" opacity="0.85">
|
||||
SCREENSHOT PENDING · 截图占位
|
||||
</text>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
@@ -1,43 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid meet" role="img" aria-label="Live todo progress placeholder">
|
||||
<defs>
|
||||
<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FBF7EF"/>
|
||||
<stop offset="100%" stop-color="#EFE7D7"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="1600" height="900" fill="url(#bg)"/>
|
||||
<rect x="32" y="32" width="1536" height="836" rx="28" ry="28"
|
||||
fill="none" stroke="#C2532D" stroke-width="3" stroke-dasharray="16 12" opacity="0.85"/>
|
||||
<g transform="translate(800 390)" stroke="#1F1B16" stroke-width="6"
|
||||
stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.9">
|
||||
<rect x="-110" y="-72" width="220" height="144" rx="18"/>
|
||||
<rect x="-36" y="-94" width="72" height="26" rx="8"/>
|
||||
<circle r="42"/>
|
||||
<circle r="18"/>
|
||||
</g>
|
||||
<text x="800" y="480" text-anchor="middle"
|
||||
font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
|
||||
font-size="34" font-weight="600" letter-spacing="6" fill="#C2532D">
|
||||
04
|
||||
</text>
|
||||
<text x="800" y="560" text-anchor="middle"
|
||||
font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
|
||||
font-size="56" font-weight="700" fill="#1F1B16">
|
||||
Live todo progress
|
||||
</text>
|
||||
<text x="800" y="625" text-anchor="middle"
|
||||
font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
|
||||
font-size="26" fill="#6B6258">
|
||||
docs/screenshots/04-todo-progress.svg
|
||||
</text>
|
||||
<text x="800" y="690" text-anchor="middle"
|
||||
font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
|
||||
font-size="24" fill="#6B6258">
|
||||
Streaming TodoWrite plan · in_progress → completed in real time.
|
||||
</text>
|
||||
<text x="800" y="844" text-anchor="middle"
|
||||
font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
|
||||
font-size="20" letter-spacing="4" fill="#6B6258" opacity="0.85">
|
||||
SCREENSHOT PENDING · 截图占位
|
||||
</text>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
@@ -1,43 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid meet" role="img" aria-label="Sandboxed preview placeholder">
|
||||
<defs>
|
||||
<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FBF7EF"/>
|
||||
<stop offset="100%" stop-color="#EFE7D7"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="1600" height="900" fill="url(#bg)"/>
|
||||
<rect x="32" y="32" width="1536" height="836" rx="28" ry="28"
|
||||
fill="none" stroke="#C2532D" stroke-width="3" stroke-dasharray="16 12" opacity="0.85"/>
|
||||
<g transform="translate(800 390)" stroke="#1F1B16" stroke-width="6"
|
||||
stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.9">
|
||||
<rect x="-110" y="-72" width="220" height="144" rx="18"/>
|
||||
<rect x="-36" y="-94" width="72" height="26" rx="8"/>
|
||||
<circle r="42"/>
|
||||
<circle r="18"/>
|
||||
</g>
|
||||
<text x="800" y="480" text-anchor="middle"
|
||||
font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
|
||||
font-size="34" font-weight="600" letter-spacing="6" fill="#C2532D">
|
||||
05
|
||||
</text>
|
||||
<text x="800" y="560" text-anchor="middle"
|
||||
font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
|
||||
font-size="56" font-weight="700" fill="#1F1B16">
|
||||
Sandboxed preview
|
||||
</text>
|
||||
<text x="800" y="625" text-anchor="middle"
|
||||
font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
|
||||
font-size="26" fill="#6B6258">
|
||||
docs/screenshots/05-preview-iframe.svg
|
||||
</text>
|
||||
<text x="800" y="690" text-anchor="middle"
|
||||
font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
|
||||
font-size="24" fill="#6B6258">
|
||||
Generated <artifact> rendered in an isolated srcdoc iframe.
|
||||
</text>
|
||||
<text x="800" y="844" text-anchor="middle"
|
||||
font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
|
||||
font-size="20" letter-spacing="4" fill="#6B6258" opacity="0.85">
|
||||
SCREENSHOT PENDING · 截图占位
|
||||
</text>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
@@ -1,43 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid meet" role="img" aria-label="71-system library placeholder">
|
||||
<defs>
|
||||
<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FBF7EF"/>
|
||||
<stop offset="100%" stop-color="#EFE7D7"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="1600" height="900" fill="url(#bg)"/>
|
||||
<rect x="32" y="32" width="1536" height="836" rx="28" ry="28"
|
||||
fill="none" stroke="#C2532D" stroke-width="3" stroke-dasharray="16 12" opacity="0.85"/>
|
||||
<g transform="translate(800 390)" stroke="#1F1B16" stroke-width="6"
|
||||
stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.9">
|
||||
<rect x="-110" y="-72" width="220" height="144" rx="18"/>
|
||||
<rect x="-36" y="-94" width="72" height="26" rx="8"/>
|
||||
<circle r="42"/>
|
||||
<circle r="18"/>
|
||||
</g>
|
||||
<text x="800" y="480" text-anchor="middle"
|
||||
font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
|
||||
font-size="34" font-weight="600" letter-spacing="6" fill="#C2532D">
|
||||
06
|
||||
</text>
|
||||
<text x="800" y="560" text-anchor="middle"
|
||||
font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
|
||||
font-size="56" font-weight="700" fill="#1F1B16">
|
||||
71-system library
|
||||
</text>
|
||||
<text x="800" y="625" text-anchor="middle"
|
||||
font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
|
||||
font-size="26" fill="#6B6258">
|
||||
docs/screenshots/06-design-systems-library.svg
|
||||
</text>
|
||||
<text x="800" y="690" text-anchor="middle"
|
||||
font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
|
||||
font-size="24" fill="#6B6258">
|
||||
Brand-grade DESIGN.md catalog with 4-color signatures.
|
||||
</text>
|
||||
<text x="800" y="844" text-anchor="middle"
|
||||
font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
|
||||
font-size="20" letter-spacing="4" fill="#6B6258" opacity="0.85">
|
||||
SCREENSHOT PENDING · 截图占位
|
||||
</text>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
@@ -1,43 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid meet" role="img" aria-label="Magazine deck placeholder">
|
||||
<defs>
|
||||
<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FBF7EF"/>
|
||||
<stop offset="100%" stop-color="#EFE7D7"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="1600" height="900" fill="url(#bg)"/>
|
||||
<rect x="32" y="32" width="1536" height="836" rx="28" ry="28"
|
||||
fill="none" stroke="#C2532D" stroke-width="3" stroke-dasharray="16 12" opacity="0.85"/>
|
||||
<g transform="translate(800 390)" stroke="#1F1B16" stroke-width="6"
|
||||
stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.9">
|
||||
<rect x="-110" y="-72" width="220" height="144" rx="18"/>
|
||||
<rect x="-36" y="-94" width="72" height="26" rx="8"/>
|
||||
<circle r="42"/>
|
||||
<circle r="18"/>
|
||||
</g>
|
||||
<text x="800" y="480" text-anchor="middle"
|
||||
font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
|
||||
font-size="34" font-weight="600" letter-spacing="6" fill="#C2532D">
|
||||
07
|
||||
</text>
|
||||
<text x="800" y="560" text-anchor="middle"
|
||||
font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
|
||||
font-size="56" font-weight="700" fill="#1F1B16">
|
||||
Magazine deck
|
||||
</text>
|
||||
<text x="800" y="625" text-anchor="middle"
|
||||
font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
|
||||
font-size="26" fill="#6B6258">
|
||||
docs/screenshots/07-magazine-deck.svg
|
||||
</text>
|
||||
<text x="800" y="690" text-anchor="middle"
|
||||
font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
|
||||
font-size="24" fill="#6B6258">
|
||||
guizang-ppt skill · horizontal pages · WebGL hero · single-file HTML.
|
||||
</text>
|
||||
<text x="800" y="844" text-anchor="middle"
|
||||
font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
|
||||
font-size="20" letter-spacing="4" fill="#6B6258" opacity="0.85">
|
||||
SCREENSHOT PENDING · 截图占位
|
||||
</text>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
@@ -1,43 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid meet" role="img" aria-label="Mobile prototype placeholder">
|
||||
<defs>
|
||||
<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FBF7EF"/>
|
||||
<stop offset="100%" stop-color="#EFE7D7"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="1600" height="900" fill="url(#bg)"/>
|
||||
<rect x="32" y="32" width="1536" height="836" rx="28" ry="28"
|
||||
fill="none" stroke="#C2532D" stroke-width="3" stroke-dasharray="16 12" opacity="0.85"/>
|
||||
<g transform="translate(800 390)" stroke="#1F1B16" stroke-width="6"
|
||||
stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.9">
|
||||
<rect x="-110" y="-72" width="220" height="144" rx="18"/>
|
||||
<rect x="-36" y="-94" width="72" height="26" rx="8"/>
|
||||
<circle r="42"/>
|
||||
<circle r="18"/>
|
||||
</g>
|
||||
<text x="800" y="480" text-anchor="middle"
|
||||
font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
|
||||
font-size="34" font-weight="600" letter-spacing="6" fill="#C2532D">
|
||||
08
|
||||
</text>
|
||||
<text x="800" y="560" text-anchor="middle"
|
||||
font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
|
||||
font-size="56" font-weight="700" fill="#1F1B16">
|
||||
Mobile prototype
|
||||
</text>
|
||||
<text x="800" y="625" text-anchor="middle"
|
||||
font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
|
||||
font-size="26" fill="#6B6258">
|
||||
docs/screenshots/08-mobile-app.svg
|
||||
</text>
|
||||
<text x="800" y="690" text-anchor="middle"
|
||||
font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
|
||||
font-size="24" fill="#6B6258">
|
||||
iPhone 15 Pro frame · multi-screen · shared /frames/ assets.
|
||||
</text>
|
||||
<text x="800" y="844" text-anchor="middle"
|
||||
font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
|
||||
font-size="20" letter-spacing="4" fill="#6B6258" opacity="0.85">
|
||||
SCREENSHOT PENDING · 截图占位
|
||||
</text>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
+1
-1
@@ -3,7 +3,7 @@
|
||||
**Status:** Draft v0.1 · 2026-04-24
|
||||
**Scope:** Product definition, scenarios, non-goals, high-level modules, and positioning against both [Anthropic's Claude Design][cd] and the existing open-source alternative ([Open CoDesign][ocod]).
|
||||
|
||||
[cd]: https://www.anthropic.com/news/claude-design
|
||||
[cd]: https://x.com/claudeai/status/2045156267690213649
|
||||
[ocod]: https://github.com/OpenCoworkAI/open-codesign
|
||||
[guizang]: https://github.com/op7418/guizang-ppt-skill
|
||||
[multica]: https://github.com/multica-ai/multica
|
||||
|
||||
Reference in New Issue
Block a user