我们如何把一张新闻页面，变成一套可以复用的语言
组件不是被切下来的页面碎片，而是内容层级、响应式规则与交互意图的共同载体。
A system, not a screenshot
从真实产品里提炼，回到任何内容产品中复用。
FlorUI 将官网里的业务模型替换为清晰的公开 props，同时把主题、排版、焦点状态和响应式细节保留下来。
01 / CONTENT
内容优先
衬线标题与舒展正文建立编辑层级，不依赖高饱和色争抢注意力。
02 / BOUNDARY
业务解耦
组件只接收通用数据，不携带数据库查询、路由约定或 Telegram 领域类型。
03 / SHIP
直接发布
源码分发的 Astro Package，包含公开导出、类型、设计 token 与 GitHub Packages 工作流。
One import away
把组件带进下一个 Astro 项目。
展示站本身就通过 workspace 安装组件包，因此页面中的每一个示例都在验证公开导出是否真实可用。
src/pages/story.astroASTRO
import '@zaihuanews/flor-ui/styles.css';
import { Button, NewsCard } from
'@zaihuanews/flor-ui';
<NewsCard
title="今日值得关注的三件事"
publishedAt=story.date
href=story.href
/>