0110 Grain
Design context for coding agents

让 Agent 看懂设计

把真实界面样本转成紧凑设计证据，让 Agent 直接用于当前项目。

开始使用 查看价格

Pattern flow

从设计样本到可执行上下文

Grain 跳过空泛交接，把真实界面模式整理成 Agent 可读的设计上下文。

不是模板商店

不卖成品页面，也不要求把某套视觉模板直接搬进项目里。

设计证据

把真实样本拆成布局层级、间距节奏、色彩语气和可复用模式。从"看起来像"变成 Agent 能引用的判断依据。

samples structure rhythm
不是组件工厂

不生成一套预设组件，也不强迫项目迁就新的 UI 技术栈。

项目上下文

读取当前代码库的 tokens、组件习惯和命名边界，再组织实现材料。让 Codex 的选择贴近正在编辑的文件，而不是另起炉灶。

context tokens constraints
不是静态交付

不把判断留在截图或设计稿里，等实现阶段再重新翻译一次。

实现信号

在 Codex 正在编辑的位置压缩出组件组合、响应式行为和取舍边界。把视觉判断放进 MCP 上下文，让 Agent 直接执行。

mcp local flow code aware

Workflow

一次请求，拿到可执行风格证据

新增页面时，Grain 先把相似界面的结构证据整理成紧凑上下文，再交给本地 Agent 转成当前项目里的实现。

  1. 描述要做的页面

    received

    告诉 Codex 页面类型、产品语气和约束，例如 pricing、settings 或 dashboard。

  2. 检索相似设计证据

    retrieving

    Grain 从真实页面和开源 UI 片段里抽取结构、间距、色彩和组件习惯。

  3. 生成可落地界面

    ready

    Codex 读取 evidence pack，把风格证据转成当前项目里的页面实现。

MCP evidence pack
live
references
8
tokens
24
mode
MCP
evidence-pack.json
json 
{
  "category": "pricing",
  "references": 8,
  "evidence": {
    "layout": ["max-w-6xl", "grid", "gap-3"],
    "radius": ["rounded-[10px]", "rounded-[18px]"],
    "tone": "quiet, dense, product-focused"
  }
}
layout spacing radius tone

Showcase

用真实项目校准风格判断

这些项目可以作为 Grain 的风格样本入口：既看界面，也看信息架构和工程产品的表达方式。

展示你的产品

Secret

secret.example.com

端到端思路的文本与文件分享，适合观察安全工具类页面的克制表达。

安全 / 文本分享

pkg0

pkg0.example.com

零安装 package preview，把包的结构、入口和使用场景变成可以直接查看的页面。

工具 / 包预览

Dapple

dapple.example.com

Dapple Flow 的视觉入口，展示可嵌入产品首屏的 canvas 动效系统。

视觉 / 动效

Func

func.example.com

面向 TypeScript 的轻量 CLI 框架，文档结构清晰、信息密度高。

工具 / CLI

Prompt recipes

把页面想法变成可检索请求

选择页面类型、产品语气和约束，Grain 会先检索相似设计证据，再把结构、间距和组件习惯交给 Codex。

Agent thread 4 recipes
You

给 SaaS 控制台补一页自定义域名绑定，默认域名、DNS 记录、验证状态和 SSL 都要能扫一眼看清。

Evidence pack ready 8 refs

适合托管平台、项目控制台、白标服务和部署产品

category
saas
tokens
3
mode
MCP
domain dns ssl
Evidence output 点击左侧 recipe 查看预览

Custom domains

Connect a branded domain to this workspace.

Pro
app.acmecloud.com
  • app.acmecloud.com Primary

    Verified · SSL active

  • docs.acmecloud.com

    Pending verification · Waiting for DNS

DNS records

CNAME docs cname.grain.app
TXT _grain.docs verify_8f3c9
Domains
2
Verified
1
SSL
On