diff --git a/src/components/data-display/Descriptions/Descriptions.stories.tsx b/src/components/data-display/Descriptions/Descriptions.stories.tsx
index a0dd4fa19..5830d2727 100644
--- a/src/components/data-display/Descriptions/Descriptions.stories.tsx
+++ b/src/components/data-display/Descriptions/Descriptions.stories.tsx
@@ -1,12 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/react'
 import { Descriptions } from 'src/components/data-display/Descriptions/Descriptions'
-import { Button } from 'src/components'
-import { ExampleStory } from 'src/utils/ExampleStory'
-import { type IDescriptionsProps } from 'src/components/data-display/Descriptions/Descriptions'
-import { Badge } from 'src/components'
-import { useState } from 'react'
-import { type RadioChangeEvent } from 'antd'
-import { Radio } from 'src/components'
 
 const meta: Meta<typeof Descriptions> = {
   title: 'Components/Data Display/Descriptions',
@@ -49,327 +42,3 @@ type Story = StoryObj<typeof Descriptions>
 */
 
 export const Primary: Story = {}
-
-export const Bordered: Story = {
-  args: {
-    bordered: true,
-  },
-}
-
-export const Vertical: Story = {
-  args: {
-    layout: 'vertical',
-  },
-}
-
-export const Small: Story = {
-  args: {
-    size: 'small',
-  },
-}
-
-export const CustomTitle: Story = {
-  args: {
-    title: <Button>Custom React Component</Button>,
-  },
-}
-
-export const WithExtra: Story = {
-  args: {
-    extra: <Button type="primary">Extra React Components</Button>,
-  },
-}
-
-export const WithTitleAndExtra: Story = {
-  args: {
-    title: <Button>Custom React Component</Button>,
-    extra: <Button type="primary">Extra React Components</Button>,
-  },
-}
-
-export const WithContentStyle: Story = {
-  args: {
-    contentStyle: { color: 'red' },
-  },
-}
-
-export const WithLabelStyle: Story = {
-  args: {
-    labelStyle: { fontWeight: 'bold' },
-  },
-}
-
-export const ResponsiveColumn: Story = {
-  args: {
-    column: { xs: 8, sm: 16, md: 24 },
-  },
-}
-
-export const ExampleTableLook: Story = {
-  render: () => {
-    const items: IDescriptionsProps['items'] = [
-      {
-        key: '1',
-        label: 'Product',
-        children: 'Cloud Database',
-      },
-      {
-        key: '2',
-        label: 'Billing Mode',
-        children: 'Prepaid',
-      },
-      {
-        key: '3',
-        label: 'Automatic Renewal',
-        children: 'YES',
-      },
-      {
-        key: '4',
-        label: 'Order time',
-        children: '2018-04-24 18:00:00',
-      },
-      {
-        key: '5',
-        label: 'Usage Time',
-        children: '2019-04-24 18:00:00',
-        span: 2,
-      },
-      {
-        key: '6',
-        label: 'Status',
-        children: <Badge status="processing" text="Running" />,
-        span: 3,
-      },
-      {
-        key: '7',
-        label: 'Negotiated Amount',
-        children: '$80.00',
-      },
-      {
-        key: '8',
-        label: 'Discount',
-        children: '$20.00',
-      },
-      {
-        key: '9',
-        label: 'Official Receipts',
-        children: '$60.00',
-      },
-      {
-        key: '10',
-        label: 'Config Info',
-        children: (
-          <>
-            Data disk type: MongoDB
-            <br />
-            Database version: 3.4
-            <br />
-            Package: dds.mongo.mid
-            <br />
-            Storage space: 10 GB
-            <br />
-            Replication factor: 3
-            <br />
-            Region: East China 1
-            <br />
-          </>
-        ),
-      },
-    ]
-    return (
-      <ExampleStory title="Descriptions with border and background color.">
-        <Descriptions title="User Info" bordered items={items} />
-      </ExampleStory>
-    )
-  },
-}
-
-export const ExampleSize: Story = {
-  render: () => {
-    const borderedItems: IDescriptionsProps['items'] = [
-      {
-        key: '1',
-        label: 'Product',
-        children: 'Cloud Database',
-      },
-      {
-        key: '2',
-        label: 'Billing',
-        children: 'Prepaid',
-      },
-      {
-        key: '3',
-        label: 'Time',
-        children: '18:00:00',
-      },
-      {
-        key: '4',
-        label: 'Amount',
-        children: '$80.00',
-      },
-      {
-        key: '5',
-        label: 'Discount',
-        children: '$20.00',
-      },
-      {
-        key: '6',
-        label: 'Official',
-        children: '$60.00',
-      },
-      {
-        key: '7',
-        label: 'Config Info',
-        children: (
-          <>
-            Data disk type: MongoDB
-            <br />
-            Database version: 3.4
-            <br />
-            Package: dds.mongo.mid
-            <br />
-            Storage space: 10 GB
-            <br />
-            Replication factor: 3
-            <br />
-            Region: East China 1
-            <br />
-          </>
-        ),
-      },
-    ]
-
-    const items: IDescriptionsProps['items'] = [
-      {
-        key: '1',
-        label: 'Product',
-        children: 'Cloud Database',
-      },
-      {
-        key: '2',
-        label: 'Billing',
-        children: 'Prepaid',
-      },
-      {
-        key: '3',
-        label: 'Time',
-        children: '18:00:00',
-      },
-      {
-        key: '4',
-        label: 'Amount',
-        children: '$80.00',
-      },
-      {
-        key: '5',
-        label: 'Discount',
-        children: '$20.00',
-      },
-      {
-        key: '6',
-        label: 'Official',
-        children: '$60.00',
-      },
-    ]
-    const [size, setSize] = useState<IDescriptionsProps['size']>('default')
-
-    const onChange = (e: RadioChangeEvent): void => {
-      console.log('size checked', e.target.value)
-      setSize(e.target.value as IDescriptionsProps['size'])
-    }
-    return (
-      <ExampleStory title="Custom sizes to fit in a variety of containers.">
-        <div>
-          <Radio.Group onChange={onChange} value={size}>
-            <Radio value="default">default</Radio>
-            <Radio value="middle">middle</Radio>
-            <Radio value="small">small</Radio>
-          </Radio.Group>
-          <br />
-          <br />
-          <Descriptions
-            bordered
-            title="Custom Size"
-            size={size}
-            extra={<Button type="primary">Edit</Button>}
-            items={borderedItems}
-          />
-          <br />
-          <br />
-          <Descriptions title="Custom Size" size={size} extra={<Button type="primary">Edit</Button>} items={items} />
-        </div>
-      </ExampleStory>
-    )
-  },
-}
-
-export const ExampleResponsiveDescriptions: Story = {
-  render: () => {
-    const items: IDescriptionsProps['items'] = [
-      {
-        label: 'Product',
-        children: 'Cloud Database',
-      },
-      {
-        label: 'Billing',
-        children: 'Prepaid',
-      },
-      {
-        label: 'Time',
-        children: '18:00:00',
-      },
-      {
-        label: 'Amount',
-        children: '$80.00',
-      },
-      {
-        label: 'Discount',
-        span: { xl: 2, xxl: 2 },
-        children: '$20.00',
-      },
-      {
-        label: 'Official',
-        span: { xl: 2, xxl: 2 },
-        children: '$60.00',
-      },
-      {
-        label: 'Config Info',
-        span: { xs: 1, sm: 2, md: 3, lg: 3, xl: 2, xxl: 2 },
-        children: (
-          <>
-            Data disk type: MongoDB
-            <br />
-            Database version: 3.4
-            <br />
-            Package: dds.mongo.mid
-          </>
-        ),
-      },
-      {
-        label: 'Hardware Info',
-        span: { xs: 1, sm: 2, md: 3, lg: 3, xl: 2, xxl: 2 },
-        children: (
-          <>
-            CPU: 6 Core 3.5 GHz
-            <br />
-            Storage space: 10 GB
-            <br />
-            Replication factor: 3
-            <br />
-            Region: East China 1
-          </>
-        ),
-      },
-    ]
-    return (
-      <ExampleStory title="Responsive configuration enables perfect presentation on small screen devices.">
-        <Descriptions
-          title="Responsive Descriptions"
-          bordered
-          column={{ xs: 1, sm: 2, md: 3, lg: 3, xl: 4, xxl: 4 }}
-          items={items}
-        />
-      </ExampleStory>
-    )
-  },
-}
diff --git a/src/components/data-display/Descriptions/DescriptionsNotProdReady.stories.tsx b/src/components/data-display/Descriptions/DescriptionsNotProdReady.stories.tsx
new file mode 100644
index 000000000..04fa10eaf
--- /dev/null
+++ b/src/components/data-display/Descriptions/DescriptionsNotProdReady.stories.tsx
@@ -0,0 +1,373 @@
+import { type Meta, type StoryObj } from '@storybook/react'
+import { Descriptions } from 'src/components/data-display/Descriptions/Descriptions'
+import { Button } from 'src/components'
+import { ExampleStory } from 'src/utils/ExampleStory'
+import { type IDescriptionsProps } from 'src/components/data-display/Descriptions/Descriptions'
+import { Badge } from 'src/components'
+import { useState } from 'react'
+import { type RadioChangeEvent } from 'antd'
+import { Radio } from 'src/components'
+
+const meta: Meta<typeof Descriptions> = {
+  title: 'Components/Not Prod Ready/Data Display/Descriptions',
+  component: Descriptions,
+
+  args: {
+    bordered: false,
+    colon: true,
+    column: 3,
+    contentStyle: undefined,
+    extra: undefined,
+    items: [
+      { label: 'Item 1', children: 'Value 1' },
+      { label: 'Item 2', children: 'Value 2' },
+      { label: 'Item 3', children: 'Value 3' },
+    ],
+    labelStyle: undefined,
+    layout: 'horizontal',
+    size: 'default',
+    title: undefined,
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['default', 'middle', 'small'],
+    },
+    layout: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+    },
+  },
+}
+export default meta
+
+type Story = StoryObj<typeof Descriptions>
+
+/*
+  Initial story templates generated by AI.
+  Customize the stories based on specific requirements.
+*/
+
+export const Bordered: Story = {
+  args: {
+    bordered: true,
+  },
+}
+
+export const Vertical: Story = {
+  args: {
+    layout: 'vertical',
+  },
+}
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+  },
+}
+
+export const CustomTitle: Story = {
+  args: {
+    title: <Button>Custom React Component</Button>,
+  },
+}
+
+export const WithExtra: Story = {
+  args: {
+    extra: <Button type="primary">Extra React Components</Button>,
+  },
+}
+
+export const WithTitleAndExtra: Story = {
+  args: {
+    title: <Button>Custom React Component</Button>,
+    extra: <Button type="primary">Extra React Components</Button>,
+  },
+}
+
+export const WithContentStyle: Story = {
+  args: {
+    contentStyle: { color: 'red' },
+  },
+}
+
+export const WithLabelStyle: Story = {
+  args: {
+    labelStyle: { fontWeight: 'bold' },
+  },
+}
+
+export const ResponsiveColumn: Story = {
+  args: {
+    column: { xs: 8, sm: 16, md: 24 },
+  },
+}
+
+export const ExampleTableLook: Story = {
+  render: () => {
+    const items: IDescriptionsProps['items'] = [
+      {
+        key: '1',
+        label: 'Product',
+        children: 'Cloud Database',
+      },
+      {
+        key: '2',
+        label: 'Billing Mode',
+        children: 'Prepaid',
+      },
+      {
+        key: '3',
+        label: 'Automatic Renewal',
+        children: 'YES',
+      },
+      {
+        key: '4',
+        label: 'Order time',
+        children: '2018-04-24 18:00:00',
+      },
+      {
+        key: '5',
+        label: 'Usage Time',
+        children: '2019-04-24 18:00:00',
+        span: 2,
+      },
+      {
+        key: '6',
+        label: 'Status',
+        children: <Badge status="processing" text="Running" />,
+        span: 3,
+      },
+      {
+        key: '7',
+        label: 'Negotiated Amount',
+        children: '$80.00',
+      },
+      {
+        key: '8',
+        label: 'Discount',
+        children: '$20.00',
+      },
+      {
+        key: '9',
+        label: 'Official Receipts',
+        children: '$60.00',
+      },
+      {
+        key: '10',
+        label: 'Config Info',
+        children: (
+          <>
+            Data disk type: MongoDB
+            <br />
+            Database version: 3.4
+            <br />
+            Package: dds.mongo.mid
+            <br />
+            Storage space: 10 GB
+            <br />
+            Replication factor: 3
+            <br />
+            Region: East China 1
+            <br />
+          </>
+        ),
+      },
+    ]
+    return (
+      <ExampleStory title="Descriptions with border and background color.">
+        <Descriptions title="User Info" bordered items={items} />
+      </ExampleStory>
+    )
+  },
+}
+
+export const ExampleSize: Story = {
+  render: () => {
+    const borderedItems: IDescriptionsProps['items'] = [
+      {
+        key: '1',
+        label: 'Product',
+        children: 'Cloud Database',
+      },
+      {
+        key: '2',
+        label: 'Billing',
+        children: 'Prepaid',
+      },
+      {
+        key: '3',
+        label: 'Time',
+        children: '18:00:00',
+      },
+      {
+        key: '4',
+        label: 'Amount',
+        children: '$80.00',
+      },
+      {
+        key: '5',
+        label: 'Discount',
+        children: '$20.00',
+      },
+      {
+        key: '6',
+        label: 'Official',
+        children: '$60.00',
+      },
+      {
+        key: '7',
+        label: 'Config Info',
+        children: (
+          <>
+            Data disk type: MongoDB
+            <br />
+            Database version: 3.4
+            <br />
+            Package: dds.mongo.mid
+            <br />
+            Storage space: 10 GB
+            <br />
+            Replication factor: 3
+            <br />
+            Region: East China 1
+            <br />
+          </>
+        ),
+      },
+    ]
+
+    const items: IDescriptionsProps['items'] = [
+      {
+        key: '1',
+        label: 'Product',
+        children: 'Cloud Database',
+      },
+      {
+        key: '2',
+        label: 'Billing',
+        children: 'Prepaid',
+      },
+      {
+        key: '3',
+        label: 'Time',
+        children: '18:00:00',
+      },
+      {
+        key: '4',
+        label: 'Amount',
+        children: '$80.00',
+      },
+      {
+        key: '5',
+        label: 'Discount',
+        children: '$20.00',
+      },
+      {
+        key: '6',
+        label: 'Official',
+        children: '$60.00',
+      },
+    ]
+    const [size, setSize] = useState<IDescriptionsProps['size']>('default')
+
+    const onChange = (e: RadioChangeEvent): void => {
+      console.log('size checked', e.target.value)
+      setSize(e.target.value as IDescriptionsProps['size'])
+    }
+    return (
+      <ExampleStory title="Custom sizes to fit in a variety of containers.">
+        <div>
+          <Radio.Group onChange={onChange} value={size}>
+            <Radio value="default">default</Radio>
+            <Radio value="middle">middle</Radio>
+            <Radio value="small">small</Radio>
+          </Radio.Group>
+          <br />
+          <br />
+          <Descriptions
+            bordered
+            title="Custom Size"
+            size={size}
+            extra={<Button type="primary">Edit</Button>}
+            items={borderedItems}
+          />
+          <br />
+          <br />
+          <Descriptions title="Custom Size" size={size} extra={<Button type="primary">Edit</Button>} items={items} />
+        </div>
+      </ExampleStory>
+    )
+  },
+}
+
+export const ExampleResponsiveDescriptions: Story = {
+  render: () => {
+    const items: IDescriptionsProps['items'] = [
+      {
+        label: 'Product',
+        children: 'Cloud Database',
+      },
+      {
+        label: 'Billing',
+        children: 'Prepaid',
+      },
+      {
+        label: 'Time',
+        children: '18:00:00',
+      },
+      {
+        label: 'Amount',
+        children: '$80.00',
+      },
+      {
+        label: 'Discount',
+        span: { xl: 2, xxl: 2 },
+        children: '$20.00',
+      },
+      {
+        label: 'Official',
+        span: { xl: 2, xxl: 2 },
+        children: '$60.00',
+      },
+      {
+        label: 'Config Info',
+        span: { xs: 1, sm: 2, md: 3, lg: 3, xl: 2, xxl: 2 },
+        children: (
+          <>
+            Data disk type: MongoDB
+            <br />
+            Database version: 3.4
+            <br />
+            Package: dds.mongo.mid
+          </>
+        ),
+      },
+      {
+        label: 'Hardware Info',
+        span: { xs: 1, sm: 2, md: 3, lg: 3, xl: 2, xxl: 2 },
+        children: (
+          <>
+            CPU: 6 Core 3.5 GHz
+            <br />
+            Storage space: 10 GB
+            <br />
+            Replication factor: 3
+            <br />
+            Region: East China 1
+          </>
+        ),
+      },
+    ]
+    return (
+      <ExampleStory title="Responsive configuration enables perfect presentation on small screen devices.">
+        <Descriptions
+          title="Responsive Descriptions"
+          bordered
+          column={{ xs: 1, sm: 2, md: 3, lg: 3, xl: 4, xxl: 4 }}
+          items={items}
+        />
+      </ExampleStory>
+    )
+  },
+}