75 lines
3.7 KiB
Markdown
75 lines
3.7 KiB
Markdown
---
|
||
type: context
|
||
id: context.kontra-day.getdesign-md
|
||
title: getdesign.md
|
||
status: active
|
||
source_of_truth: false
|
||
freshness: current
|
||
last_reviewed: 2026-09-08
|
||
tags:
|
||
- pack/kontra-day
|
||
- agent-memory/context
|
||
- autolearn
|
||
- rich-discovery
|
||
- repo/getdesign-md
|
||
---
|
||
|
||
# getdesign.md
|
||
|
||
## Rich discovery update (2026-09-08 05:34:12)
|
||
|
||
Skill active — and let me answer your Stitch workflow question with verified facts, because it determines how we run Phase Two.
|
||
|
||
## What Google Stitch can actually export (as of the latest updates)
|
||
| Export | Works? | Note |
|
||
|---|---|---|
|
||
| **Copy code / download** (HTML/CSS/**Tailwind**) | ✅ Yes | Its core output. Real components, not images — and Tailwind is exactly our stack. |
|
||
| **To Figma** | ⚠️ Flaky | Direct Stitch→Figma has been unreliable/long-queued (known bug threads); an MCP route exists. Not dependable. |
|
||
| **To Google AI Studio** | ✅ Yes (Stitch 2.0+) | Can push designs into AI Studio projects. |
|
||
| **Project brief / DESIGN.md** | ❌ No direct feature | Doesn't produce one — **but this is what I do for you**: I write the DESIGN.md (tokens + brief) from your Stitch panels, and that's what `design-build` consumes later. |
|
||
|
||
## What I'd actually recommend for Kontra Day
|
||
Stitch's real value here is **visual exploration + a Tailwind reference**. The practical pipeline:
|
||
|
||
1. **You keep designing panels in Stitch** → screenshot what you like.
|
||
2. **I turn the approved panels into a `DESIGN.md`** — exact palette, typography, spacing, radius + a written identity brief (the "project brief" you mentioned, as the file format this workflow already uses).
|
||
3. **I generate alternative directions** via this skill's `image-maker` so you can compare.
|
||
4. **Build** uses the tokens + Stitch's Tailwind export as reference → real templ components. (Stitch's HTML won't drop straight into templ, but it's a strong visual contract.)
|
||
|
||
So: **yes — copy the Tailwind code and/or push to AI Studio, but treat both as reference; the lasting artifact is DESIGN.md.** Figma isn't worth the friction for a solo project unless you like working there.
|
||
|
||
## Fonts & readability (your instinct is right to think about this)
|
||
For a news-opinion site, the classic readable pairing:
|
||
- **Headlines**: a strong serif or display face (e.g. Newsreader, Source Serif, Playfair) at large weight
|
||
- **Body**: a humanist sans or print-style serif at 17–18px, ~65–75 chars/line, 1.5–1.65 line height — this is the actual readability driver, more than the font choice itself
|
||
- Self-host the fonts (no Google CDN at runtime — performance + privacy), using variable fonts where possible
|
||
- Typography choices go into DESIGN.md as tokens, so colours/fonts stay data-driven per our plan
|
||
|
||
So how do you want to start?
|
||
|
||
|
||
[tool:ask_user_question]
|
||
|
||
## Source paths observed
|
||
|
||
- `getdesign.md/apple/design-md`
|
||
- `github.com/VoltAgent/awesome-design-md`
|
||
- `justinmckelvey.com/blog/google-stitch-vs-figma`
|
||
- `HTML/CSS/Tailwind`
|
||
|
||
## Evidence
|
||
|
||
- Confidence: 84%
|
||
- Reason: Update component/repository context with detailed discovered structure and configuration
|
||
|
||
## Related
|
||
|
||
- [[packs/kontra-day/00-system/pi-agent/memory-manifest|Memory Manifest]]
|
||
|
||
## Related learned memories <!-- same-turn-2026-09-08 05:34:12 -->
|
||
|
||
- session: [[packs/kontra-day/80-sessions/rich-discovery-getdesign-md-2026-09-08-05-34-12|Rich discovery: getdesign.md 2026-09-08 05:34:12]]
|
||
- context: [[packs/kontra-day/20-context/getdesign-md|getdesign.md]]
|
||
- runbook: [[packs/kontra-day/70-runbooks/getdesign-md-deployment-operations|getdesign.md deployment operations]]
|
||
- observation: [[packs/kontra-day/60-observations/access-repository-structure-and-configuration-patterns|getdesign.md repository structure and configuration patterns]]
|