html-style

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

html-style

Transform barebones HTML into styled output using a specific design system.

使用特定设计系统将基础HTML转换为带样式的输出。

Workflow

工作流程

Read the user's HTML
Identify elements to style (tables, lists, status text, buttons, sections)
Inject
```
<style>
```
block from
```
assets/base.css
```
Add appropriate classes to HTML elements
Add interactive JS if needed (copy buttons, drafts, collapsible sections)

读取用户的HTML
识别需要样式化的元素（表格、列表、状态文本、按钮、区块）
从
```
assets/base.css
```
注入
```
<style>
```
代码块
为HTML元素添加合适的类
如有需要，添加交互式JS（复制按钮、草稿、可折叠区块）

Quick Class Reference

快速类参考

Element	Class	Effect
Status text	`.stale` `.warm` `.pending`	Red/green/orange inline text
Trend	`.trend-up` `.trend-down`	Green ↑ / Red ↓
Category tag	`.tag-group` `.tag-dm` `.tag-money`	Blue/purple/orange pill
Status pill	`.status-success` `.status-error` `.status-pending`	Filled green/red/orange
Filter toggle	`.filter` `.filter.active`	Outline / filled black
Time filter	`.pill` `.pill.active`	Small pill, black when active
Stat box	`.stat` > `.stat-value` + `.stat-label`	28px number, 12px label
Table	default or `.table-styled`	Minimal or colored values
Section header	`.section-header`	Dark bar with white text
Collapsible	`<details>` + `<summary>`	Native HTML collapse
Insight	`.insight`	Italic, yellow background
Tier	`.tier-gold` `.tier-silver` `.tier-bronze`	Row background colors

元素	类名	效果
状态文本	`.stale` `.warm` `.pending`	红/绿/橙色行内文本
趋势	`.trend-up` `.trend-down`	绿色 ↑ / 红色 ↓
分类标签	`.tag-group` `.tag-dm` `.tag-money`	蓝/紫/橙色胶囊样式
状态胶囊	`.status-success` `.status-error` `.status-pending`	填充式绿/红/橙色
筛选切换器	`.filter` `.filter.active`	轮廓样式 / 填充黑色
时间筛选器	`.pill` `.pill.active`	小型胶囊，激活时为黑色
统计框	`.stat` > `.stat-value` + `.stat-label`	28px数字，12px标签
表格	默认或 `.table-styled`	极简样式或带颜色的值
区块标题	`.section-header`	深色栏配白色文本
可折叠元素	`<details>` + `<summary>`	原生HTML折叠功能
提示信息	`.insight`	斜体，黄色背景
等级	`.tier-gold` `.tier-silver` `.tier-bronze`	行背景色

Element Styling Rules

元素样式规则

Tables

表格

Default: minimal borders, no hover

Add

.table-styled

for: hover effect,

.positive

.negative

cell colors,

.highlight

rows

Sortable: add

th.sortable

with

<a href="?sort=col">Col ▼</a>

默认：极简边框，无悬停效果
添加
```
.table-styled
```
可实现：悬停效果、
```
.positive
```
/
```
.negative
```
单元格颜色、
```
.highlight
```
行高亮

可排序：为

th.sortable

添加

<a href="?sort=col">Col ▼</a>

Status Indicators

状态指示器

Text status (
```
.stale
```
/
```
.warm
```
/
```
.pending
```
): Use for inline status in sentences
Status pills (
```
.status-*
```
): Use for badge-style indicators, typically with icon (✓ ✗ ◷)
Trends (
```
.trend-up
```
/
```
.trend-down
```
): Use for numeric changes, adds arrow automatically

文本状态（
```
.stale
```
/
```
.warm
```
/
```
.pending
```
）：用于句子中的行内状态
状态胶囊（
```
.status-*
```
）：用于徽章式指示器，通常搭配图标（✓ ✗ ◷）
趋势（
```
.trend-up
```
/
```
.trend-down
```
）：用于数值变化，自动添加箭头

Sections

区块

Use

.section-header

with emoji prefix for visual breaks:

html

<div class="section-header">🔴 URGENT</div>
<div class="section-header">🟠 PENDING</div>

使用带emoji前缀的

.section-header

实现视觉分隔：

html

<div class="section-header">🔴 URGENT</div>
<div class="section-header">🟠 PENDING</div>

Interactive Elements

交互式元素

When HTML has drafts or copy buttons, add this JS:

javascript

function saveDraft(el) {
    localStorage.setItem('draft:' + el.dataset.threadId, el.textContent);
}
function copyToClipboard(text, btn) {
    navigator.clipboard.writeText(text).then(() => {
        btn.textContent = 'Copied!';
        setTimeout(() => btn.textContent = 'Copy', 1500);
    });
}

当HTML包含草稿或复制按钮时，添加以下JS：

javascript

function saveDraft(el) {
    localStorage.setItem('draft:' + el.dataset.threadId, el.textContent);
}
function copyToClipboard(text, btn) {
    navigator.clipboard.writeText(text).then(() => {
        btn.textContent = 'Copied!';
        setTimeout(() => btn.textContent = 'Copy', 1500);
    });
}

Deep Links

深度链接

Convert URLs to native app links:

Telegram:
```
tg://resolve?domain=username
```
SMS:
```
sms:+14155551234
```

将URL转换为原生应用链接：

Telegram:
```
tg://resolve?domain=username
```
SMS:
```
sms:+14155551234
```

Theme

主题

Default: Light (
```
background: #fff
```
)
Dark mode: Add
```
class="dark"
```
to
```
<body>
```
when user requests dark theme or context is trading/real-time

默认：浅色（
```
background: #fff
```
）
深色模式：当用户请求深色主题或场景为交易/实时数据时，为
```
<body>
```
添加
```
class="dark"
```

Compatibility with Structure Skills

与结构化技能的兼容性

When styling output from

quick-view

table-filters

, these class mappings apply:

为

quick-view

或

table-filters

的输出添加样式时，适用以下类映射：

quick-view classes

quick-view 类映射

Their Class	Style As
`.type-user`	`.status-pending` (blue border)
`.type-draft`	`.status-pending` (orange border)
`.type-done`	`.status-success` (green border)
`.source`	Already styled (muted, small)
`.meta`	Already styled (muted header)
`.actions`	Inline button group

原类名	样式化为
`.type-user`	`.status-pending` （蓝色边框）
`.type-draft`	`.status-pending` （橙色边框）
`.type-done`	`.status-success` （绿色边框）
`.source`	已样式化（弱化、小字号）
`.meta`	已样式化（弱化标题）
`.actions`	行内按钮组

table-filters classes

table-filters 类映射

Their Class	Style As
`.filter-bar`	Flex row with gap
`.filter-chips`	Inline chip container
`.chip`	Dark pill with `.chip-remove`
`.filter-menu`	Dropdown panel ( `.filter-menu` )
`.empty-state`	Centered, muted text

The

base.css

includes styles for these classes automatically.

原类名	样式化为
`.filter-bar`	带间距的Flex行
`.filter-chips`	行内芯片容器
`.chip`	深色胶囊搭配 `.chip-remove`
`.filter-menu`	下拉面板（ `.filter-menu` ）
`.empty-state`	居中、弱化文本

base.css

自动包含这些类的样式。

Resources

资源

Full style reference: Read references/style-guide.md for detailed CSS patterns and examples
Base CSS: Inject assets/base.css into
```
<style>
```
tag in
```
<head>
```

完整样式参考：阅读references/style-guide.md获取详细CSS模式和示例
基础CSS：将assets/base.css注入到
```
<head>
```
中的
```
<style>
```
标签内