Integrate role asset studio into custom world agent flow

src/components/custom-world-home/CustomWorldCreationStartCard.tsx

@@ -0,0 +1,43 @@
+import { getNineSliceStyle, UI_CHROME } from '../../uiAssets';
+
+type CustomWorldCreationStartCardProps = {
+  onCreateNew: () => void;
+};
+
+export function CustomWorldCreationStartCard({
+  onCreateNew,
+}: CustomWorldCreationStartCardProps) {
+  return (
+    <div
+      className="pixel-nine-slice pixel-panel overflow-hidden"
+      style={getNineSliceStyle(UI_CHROME.storyPanel, {
+        paddingX: 18,
+        paddingY: 16,
+      })}
+    >
+      <div className="relative overflow-hidden rounded-[1.75rem] border border-white/8 bg-[radial-gradient(circle_at_top_left,rgba(125,211,252,0.18),transparent_36%),linear-gradient(180deg,rgba(8,10,14,0.28),rgba(8,10,14,0.82))] px-5 py-5">
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+          <div>
+            <div className="text-2xl font-black text-white sm:text-3xl">
+              新建作品
+            </div>
+          </div>
+          <button
+            type="button"
+            onClick={onCreateNew}
+            className="pixel-nine-slice pixel-pressable w-full text-left sm:w-auto"
+            style={getNineSliceStyle(UI_CHROME.choiceButton, {
+              paddingX: 18,
+              paddingY: 11,
+            })}
+          >
+            <div className="flex items-center justify-between gap-4">
+              <span className="text-sm font-semibold text-white">新建作品</span>
+              <span className="text-white/60">→</span>
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}