keithrana/cycle-atlas
1
0 Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Add HyperFrames skills

Browse Source 
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011h6NB8JQtfPc6eRCefEzBB
This commit is contained in:
Claude committed 2026-10-14 21:51:46 +00:00
1 parent 6bd8165e6d
commit 1b2c8439f0
964 files changed
+142321
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.agents/skills/talking-head-recut/references/styles/xhs.html
+206
View File
@@ -0,0 +1,206 @@
<!--
Style: xhs (小红书) — cream + hot pink · chips · #hashtags · ❤️💬 row
─────────────────────────────────────────────────────────────────────
Tokens
bg #fff5e9 (warm cream)
ink #1d1418
muted #8a7a78
accent #ff2e63 (hot pink — chip + interaction icon)
accent2#ff8a4c (orange — tag)
accent3#f0c419 (yellow — pin)
Fonts
headline & body — Noto Sans SC fallback: ui-sans-serif, system-ui, "PingFang SC", sans-serif
Best with
layouts: overlay, stack (especially in portrait/9:16)
frames: clean, polaroid
content: 社交剪辑 / 生活方式 / 种草 / 短视频高光
-->
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>style · xhs (小红书)</title>
<style>
html,
body {
margin: 0;
padding: 0;
background: #0a0c12;
font-family: ui-sans-serif, system-ui, sans-serif;
}
.stage {
position: relative;
width: 1920px;
height: 1080px;
transform-origin: top left;
transform: scale(0.5);
overflow: hidden;
}
.card-host {
position: absolute;
left: 0;
top: 0;
width: 1920px;
height: 1080px;
}
</style>
</head>
<body>
<div class="stage">
<div class="card-host">
<div class="card" data-card-id="ref-xhs">
<style>
.card[data-card-id="ref-xhs"] .root {
--bg: #fff5e9;
--ink: #1d1418;
--muted: #8a7a78;
--accent: #ff2e63;
--accent2: #ff8a4c;
--accent3: #f0c419;
--font-sans: ui-sans-serif, system-ui, "PingFang SC", "Hiragino Sans GB", sans-serif;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
background: var(--bg);
color: var(--ink);
font-family: var(--font-sans);
padding: 36px 44px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 22px;
}
.card[data-card-id="ref-xhs"] .user-row {
display: flex;
align-items: center;
gap: 14px;
}
.card[data-card-id="ref-xhs"] .avatar {
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, #ff2e63, #ff8a4c);
box-shadow:
0 0 0 3px #fff,
0 0 0 4px rgba(255, 46, 99, 0.3);
}
.card[data-card-id="ref-xhs"] .user-info {
flex: 1;
}
.card[data-card-id="ref-xhs"] .user-name {
font: 700 22px/1.1 var(--font-sans);
color: var(--ink);
}
.card[data-card-id="ref-xhs"] .user-sub {
font: 400 16px/1.3 var(--font-sans);
color: var(--muted);
}
.card[data-card-id="ref-xhs"] .follow {
padding: 8px 20px;
border-radius: 999px;
background: var(--accent);
color: #fff;
font: 700 16px/1 var(--font-sans);
}
.card[data-card-id="ref-xhs"] .title {
margin: 0;
font: 800 84px/1.1 var(--font-sans);
color: var(--ink);
letter-spacing: -0.01em;
}
.card[data-card-id="ref-xhs"] .title .heart {
color: var(--accent);
}
.card[data-card-id="ref-xhs"] .detail {
margin: 0;
font: 500 28px/1.5 var(--font-sans);
color: var(--ink);
max-width: 94%;
}
.card[data-card-id="ref-xhs"] .tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.card[data-card-id="ref-xhs"] .tag {
padding: 8px 18px;
border-radius: 999px;
background: rgba(255, 46, 99, 0.12);
color: var(--accent);
font: 600 18px/1 var(--font-sans);
}
.card[data-card-id="ref-xhs"] .tag.orange {
background: rgba(255, 138, 76, 0.16);
color: var(--accent2);
}
.card[data-card-id="ref-xhs"] .tag.yellow {
background: rgba(240, 196, 25, 0.18);
color: #a98209;
}
.card[data-card-id="ref-xhs"] .interactions {
display: flex;
gap: 28px;
margin-top: auto;
padding-top: 14px;
border-top: 1px solid rgba(0, 0, 0, 0.06);
font: 700 22px/1 var(--font-sans);
color: var(--ink);
}
.card[data-card-id="ref-xhs"] .interactions span {
display: inline-flex;
align-items: center;
gap: 8px;
}
.card[data-card-id="ref-xhs"] .interactions .heart-ic {
color: var(--accent);
font-size: 26px;
}
</style>
<div class="root">
<div class="user-row" data-anim="fade-in" data-anim-at="0.05" data-anim-duration="0.4">
<div class="avatar"></div>
<div class="user-info">
<div class="user-name">@小研究员</div>
<div class="user-sub">关注我，看我每天拆一段视频 · 18分钟前</div>
</div>
<div class="follow">+ 关注</div>
</div>
<h2 class="title" data-anim="fade-in" data-anim-at="0.3" data-anim-duration="0.5">
亲测有效！<span class="heart">♥</span> 30 秒抓住注意力的小技巧
</h2>
<p class="detail" data-anim="fade-in" data-anim-at="0.7" data-anim-duration="0.45">
开头别废话——直接抛结论。听众的大脑在前 3 秒就决定要不要继续，
这是平台算法之外，最朴素也最重要的事实。
</p>
<div class="tags" data-anim="fade-in" data-anim-at="1.0" data-anim-duration="0.4">
<span class="tag">#内容创作</span>
<span class="tag orange">#播客剪辑</span>
<span class="tag yellow">#开头技巧</span>
</div>
<div
class="interactions"
data-anim="fade-in"
data-anim-at="1.25"
data-anim-duration="0.4"
>
<span><span class="heart-ic">♥</span> 12.4k</span>
<span>💬 386</span>
<span>⭐ 891</span>
<span
style="margin-left: auto; color: var(--muted); font-weight: 400; font-size: 18px"
>📤 分享</span
>
</div>
</div>
</div>
</div>
</div>
</body>
</html>