diff --git a/prototype.tsx b/prototype.tsx
new file mode 100644
index 0000000..2fe752e
--- /dev/null
+++ b/prototype.tsx
@@ -0,0 +1,92 @@
+<template>
+}
+
+
+/* 通用按钮 */
+.ghost-btn {
+border-radius: 999px;
+border: 1px solid rgba(143, 154, 183, 0.5);
+background: transparent;
+font-size: 12px;
+padding: 4px 10px;
+cursor: pointer;
+color: #4b536c;
+}
+
+
+.ghost-btn-xs {
+padding: 2px 8px;
+font-size: 11px;
+}
+
+
+.primary-btn {
+border-radius: 999px;
+border: none;
+background: #2f7cf6;
+color: #ffffff;
+font-size: 12px;
+padding: 5px 12px;
+cursor: pointer;
+}
+
+
+.primary-chip {
+border-radius: 999px;
+border: none;
+background: var(--primary-soft);
+color: var(--primary);
+font-size: 12px;
+padding: 5px 10px;
+cursor: pointer;
+}
+
+
+/* toggle */
+.toggle {
+position: relative;
+display: inline-flex;
+align-items: center;
+gap: 6px;
+font-size: 12px;
+color: var(--text-sub);
+}
+
+
+.toggle input {
+display: none;
+}
+
+
+.toggle-slider {
+position: relative;
+width: 32px;
+height: 18px;
+border-radius: 999px;
+background: #d3d8e6;
+}
+
+
+.toggle-slider::after {
+content: '';
+position: absolute;
+top: 2px;
+left: 2px;
+width: 14px;
+height: 14px;
+border-radius: 999px;
+background: #ffffff;
+box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
+transition: transform 0.18s ease;
+}
+
+
+.toggle input:checked + .toggle-slider {
+background: #2f7cf6;
+}
+
+
+.toggle input:checked + .toggle-slider::after {
+transform: translateX(14px);
+}
+</style>
\ No newline at end of file